React.js and Mapbox: mapbox map not rendering properly when using react.js

Question

I'm learning to use both react and mapbox,but am struggling with why my mapbox map is not rendering properly when loaded through React. When I load it normally (without React.js), there is no problem, as this following code works and the map appears normally:

<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/>

<div> id="map"></div>

    <script>                
    var map = L.mapbox.map('map', 'blabla.blabla').setView([lat, long], 9);
    </script>

But when I do it the following way, the map often doesn't appear at all, or when it does, I see just a portion of it in the top left of the div.

<script src="path/to/react.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css"/>

<div id="react-content">
    <script src="path/to/react/content.js'></script>
</div>

//now inside react/content.js, there is a mapbox component inside an outer component. I'm leaving out the rest of the code to save space, and I believe that I am rendering the OuterComponent and the MapBoxMap component correctly inside that.

var MapBoxMap = React.createClass({
    componentDidMount: function() {
        L.mapbox.accessToken = this.props.accessToken;
        var map = L.mapbox.map(this.getDOMNode(), this.props.mapId)
            .setView([15, -105], 9);            
    },
    render: function() {
        return (
                <div id="map"></div>
        );
    }
});

Doing things like zooming, or opening the chrome developer tools seems to make the map appear sometimes. I don't know what is going on. Is the component not mounted properly when I attempt to render the map? I thought that is what componentDidMount was supposed to take care of? I would really appreciate any insight! Alos, this map is being rendered inside some Zurb Foundation elements, so I don't know if that makes a difference?

Answer 1

You're missing the related CSS? You always need to set the height of the element:

html, body, #map {
    height: 100%;
}

I am unable to test because of React but it sounds like the map is unable to get the correct dimensions from the element. That usually happens if you don't set the correct CSS or the element has display: none; If setting the correct CSS doesn't work for you can try invalidating the size so the map will reset itself. L.mapbox.Map has a invalidateSize method you can call, see:

http://leafletjs.com/reference.html#map-invalidatesize