React component inside function map()

Question

Hello I have a question about react component. What I want to do is render a component inside the map function and pass the component inside the map function the object returned in each iteration.

The code above works fine for me.

export class MapContainer extends Component {
    constructor(props) {
        super(props);

        const style = {
            width: '100%',
            height: '100%'
        }
    }

    render() {
        return (
            <Map 
                google={this.props.google}
                style={this.style}
                initialCenter={{lat: 35.85472104, lng: 14.48779873}}
                zoom={11}>

                <Marker onClick={this.onMarkerClick} name={'Current location'} />
            </Map>
        );
    }
}

But as I said before I want to put the component Marker inside a the map function but it doesn't works properly:

import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

export class MapContainer extends Component {
    constructor(props) {
        super(props);

        const style = {
            width: '100%',
            height: '100%'
        }

        const objMarkers = [
            {
                title: "The marker`s title will appear as a tooltip.",
                name: "Soma",
                position: [35.85472104, "14.48779873"]
            },
            {
                title: "The marker`s title will appear as a tooltip.",
                name: "Soma",
                position: ["35.9220325", "14.37038234"]
            }
        ]
    }

    render() {
        return (
            <Map 
                google={this.props.google}
                style={this.style}
                initialCenter={{lat: 35.85472104, lng: 14.48779873}}
                zoom={11}>

                return this.objMarkers.map((marker) => 
                    <Marker title={marker.title} name={marker.name} />
                );
            </Map>
        );
    }
}

const LoadingContainer = (props) => (
  <div>Fancy loading container!</div>
)

export default GoogleApiWrapper({
  apiKey: ("AIzaSyBHq-A0EL3usDeqH5q8B635Rafxcguc0a8"),
  LoadingContainer: LoadingContainer
})(MapContainer)

Thank you very much for your help!!!

You can try to first assign a variable such as: const markers = this.objMarkers.map((marker) => <Marker title={marker.title} name={marker.name} /> ); and then you can use markers variable inside Map tags like that: {markers} Take a look here: codesandbox.io/s/yk5vprz1nz Also, you don't need to use return keyword, map function already returns a new array. — burak
– burak, Commented May 9, 2018 at 13:11
this.objMarkers = [ instead of const objMarkers = [. and plus replies below — Evgeny Timoshenko
– Evgeny Timoshenko, Commented May 9, 2018 at 13:12

trixn · Accepted Answer · 2018-05-09 13:24:52Z

1

Read Lists and Keys in the react docs for a detailed explanation of how to render lists in jsx.

Your return is misplaced. You can't use it like this in jsx. The correct syntax for inline mapping an array is:

render() {
    return (
        <Map 
            google={this.props.google}
            style={this.style}
            initialCenter={{lat: 35.85472104, lng: 14.48779873}}
            zoom={11}
        >
            {this.objMarkers.map((marker) => (
                <Marker key={marker.name} title={marker.title} name={marker.name} />
             ))}
        </Map>
    );
}

Also note that if you create siblings of the same type you need to assign a unique key prop to each of them.

Also in your constructor you created local variables. They only exist inside your constructor. You need to assign the values to instance properties as @Evgeny Timoshenko correctly pointed out or they will not be accessible with this in your render() function:

constructor(props) {
    super(props);

    this.style = {
        width: '100%',
        height: '100%'
    }

    this.objMarkers = [
        {
            title: "The marker`s title will appear as a tooltip.",
            name: "Soma",
            position: [35.85472104, "14.48779873"]
        },
        {
            title: "The marker`s title will appear as a tooltip.",
            name: "Soma",
                position: ["35.9220325", "14.37038234"]
        }
    ]
}

edited May 9, 2018 at 13:24

answered May 9, 2018 at 13:02

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reynier Téllez Over a year ago

Thank you very much all of you. Works properly now.

karaxuna · Accepted Answer · 2018-05-09 13:03:02Z

0

Do it like this:

{markers.map.

Instead of return.

answered May 9, 2018 at 13:03

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Comments

Sarath Kumar · Accepted Answer · 2018-05-09 13:07:25Z

0

Try adding the Key in returning set of Marker component, And remember that you are in JSX so use curly braces to return the element..

{ this.objMarkers.map((marker, index) => 
       <Marker key={index} title={marker.title} name={marker.name} />
    )
}

Here is the Complete reference

edited May 9, 2018 at 13:07

answered May 9, 2018 at 13:05

Sarath Kumar

2,3531 gold badge14 silver badges26 bronze badges

Collectives™ on Stack Overflow

React component inside function map()

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related