How to - multiple polylines with different colors for each polyline- react-leaflet

Question

I'm building a small react app with Leaflet and React for showing different metro stations for Vienna.

The problem I came to was how to edit the colors for individual metro lines in react-leaflet. Image of the map with different metro lines. Now they are all in red, I would like to customize the colors with the colors of the circles.

The colors, name and the coordinates of each metro station are edited in the GeoJSON file.

GeoJSON file (vienna_metro_lines_byLines.geojson)

{
  "type": "FeatureCollection",      

  "features": [
    { "type": "Feature", "id": "01", "properties": { "name": "U1", "color": "red" },
      "geometry": { "type": "MultiLineString", "coordinates":
        [
          [ 48.1423652, 16.3999045 ], [ 48.1458145, 16.3856390 ], [ 48.1537071, 16.3824464 ], 
        ]
      }
    },
    { "type": "Feature", "id": "02", "properties": { "name": "U2", "color": "#9933ff" },
      "geometry": { "type": "MultiLineString", "coordinates":
        [
          [ 48.2262470, 16.5084951 ], [ 48.2345713, 16.5044830 ], [ 48.2334553, 16.4854766 ],
        ]
 }

Component file

//data
import geojsonDataByLines from './vienna_metro_lines_byLines.geojson';

//main component
class ViennaPoliLynes extends Component {
  constructor() {
    super();
    this.state = {
        geojsonDataByLines: geojsonDataByLines

    };
  }

  polylineLineMaker() {
    const geojsonDataByLines = this.state.geojsonDataByLines;

    const testMe = geojsonDataByLines.features.map((cord) => {
        return cord.geometry.coordinates;
    });
    return testMe;
  }

  polylineLineColor() {
    //The color for the polylines shoud go here 
    const geojsonDataByLines = this.state.geojsonDataByLines;

    const testMe = geojsonDataByLines.features.map((cord) => {
        return cord.properties.color;
    });
    console.log(testMe)
    return testMe;    
  }

  render() {
    return (
        <Polyline positions={this.polylineLineMaker()} color={this.polylineLineColor()}>

        </Polyline>
    );
  }
}

Ty. For your time.

Answer 1

It seems like you are actually creating just one polyline by merging the coordinates of all polylines together. You should try rendering multiple polylines like so:

import {Map, Polyline} from 'react-leaflet'

//data
import geojsonDataByLines from './vienna_metro_lines_byLines.geojson';

//main component
class ViennaPoliLynes extends Component {
  render() {
    return (
      <Map>
        {geojsonDataByLines.features.map((feature) => (
          <Polyline 
            positions={feature.geometry.coordinates} 
            color={feature.properties.color}
            />
        )}
      </Map>
    )
  }
}