Search code examples
react-nativereact-native-maps

React Native: Marker working statically but not dynamically


I'm trying to showing multiple marker in React Native Mapview. My code

this.state = {
      coords: [
        { latitude: 23.759119, longitude: 90.411804 },
        { latitude: 23.759188, longitude: 90.41167 },
        { latitude: 23.759127, longitude: 90.41138 },
        { latitude: 23.759224, longitude: 90.411995 },
        { latitude: 23.7591, longitude: 90.41138 }
      ]}

It's working when code like as

<Marker coordinate={this.state.coords[0]} />
          <Marker coordinate={this.state.coords[1]} />
          <Marker coordinate={this.state.coords[2]} />
          <Marker coordinate={this.state.coords[3]} />
          <Marker coordinate={this.state.coords[4]} />

But not working when code like as

{this.state.coords.map((c, index) => {
            <Marker key={index} coordinate={c} />;
          })}

I didn't get any error. Also not understood why not working the codes. Anyone can help me?


Solution

  • I got the solution. I've not returning anything. So modify the code like

    {this.state.coords.map((c, index) => {
                return <Marker key={index} coordinate={c} />;
              })}