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!!!

Answer 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"]
        }
    ]
}

Answer 2

Do it like this:

{markers.map.

Instead of return.

Answer 3

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