react list + map component
<p>I'm working in a react project and what I want to achieve is a list of items with a google map in the side. I've been working on it for a lot of time, looking for the best way to do it and I found many examples but they don't really have a good performance.
Also I want that when you over an item of the list the marker of the corresponding item in the map change the color or something like that, so I want to synchronize markers with the items in the list.</p>

<p>Here is my Map component to let you know what libraries I'm using for the moment:</p>

<pre><code>import React from 'react';
import GoogleMaps from 'google-maps-api';
import MapConfig from 'config/maps.json';
import mapStyles from './map.styles';

const MapWithKey = GoogleMaps(MapConfig.API_KEY);

class Map extends React.Component {

    render() {
        const items = this.props.items;
        MapWithKey().then(( maps ) =&gt; {
            const map = new maps.Map(document.getElementById('js-map'), {
                center: {lat: -34.397, lng: 150.644},
                scrollwheel: false,
                zoom: 8,
                mapTypeControl: false,
                streetViewControl: false
            });

            for ( let item of items ) {
                new maps.Marker({
                    position: new maps.LatLng(item.latitude, item.longitude),
                    map: map
                });
            }
        });


        return(
            &lt;div style={mapStyles} id="js-map"&gt;{this.props.children}&lt;/div&gt;
        );
    }
}

export default Map;
</code></pre>

<p>I notice during the development I cannot add the markers in the state because every time I would add one, the component will rerender again.</p>

<p>Do you know a good way to do so and structure the components in a good way?
Help would be really appreciated.</p>

<p>Thanks in advance.</p>