React Redux, rerendering after data was fetched and mapped into component?
<p>Hi I am having trouble with getting data fetched and available as this.props.data to pass into a child component <code>&lt;GoogleMaps /&gt;</code> and rerendering when the data has changed. </p>

<p>It only works the first time the form is submitted and data is fetched but not again. The new data is not available since the <code>render()</code> function calls <code>{this.renderMap(this.props.data)}</code> before <code>{this.renderData()}</code>, which fetches and returns and maps the data.</p>

<p>I tried switching them but it looks like the render() function is not waiting until data is fetched before calling <code>{this.renderMap(this.props.data)}</code>. Should I be passing the data to the GoogleMap component a different way that allows it to reload with new data before rendering?</p>

<p>My renderData(); works fine, which returns component <code>ListItem</code>. It works every time my form is submitted. The problem is getting <code>GoogleMaps</code> component to be aware of this change and re-rendering?</p>

<pre><code>class Feature extends Component {

    handleFormSubmit({ term, location }) {
        this.props.fetchData( { term, location });
        this.setState({showMap: true});
    }
    renderData() {
        return this.props.data.map((data) =&gt; {
            return (
                &lt;ListItem
                    key={data.id}
                    data={data} /&gt;
            )
        });
    }
    renderMap(data) {
        if (this.state.showMap == true) {
            const lon = data[0].location.coordinate.longitude;
            const lat = data[0].location.coordinate.latitude;
        return (
            &lt;GoogleMap 
               data={data} 
               lon={lon} 
               lat={lat} /&gt;
        )
        }
    }
    render() {
        const { handleSubmit, fields: { term, location }} = this.props;
        return (
            &lt;div&gt;
                &lt;div&gt;
                    &lt;form className="form-inline" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}&gt;
                        &lt;fieldset className="form-group"&gt;
                            &lt;label&gt;Find:&lt;/label&gt;
                            &lt;input className="form-control" {...term} /&gt;
                        &lt;/fieldset&gt;
                        &lt;fieldset className="form-group"&gt;
                            &lt;label&gt;Location:&lt;/label&gt;
                            &lt;input className="form-control" {...location} /&gt;
                        &lt;/fieldset&gt;
                        &lt;button action="submit" className="btn btn-primary"&gt;Search&lt;/button&gt;
                    &lt;/form&gt;
                &lt;/div&gt;
                &lt;div className="map_container"&gt;
                {this.renderMap(this.props.data)}
                &lt;/div&gt;
                &lt;ul className="list-group"&gt;
                {this.renderData()}
                &lt;/ul&gt;
            &lt;/div&gt;
        )
    }
}

function mapStateToProps(state) {
    return { data: state.data };
}

export default reduxForm({
    form: 'search',
    fields: ['term', 'location']
}, mapStateToProps, actions)(Feature);
</code></pre>

<p>Here is the fetchData function, I am getting the data fine.</p>

<pre><code>export function fetchData( {term, location} ) {
    return function(dispatch) {
        axios.post(`${ROOT_URL}/data`, {term, location})
        .then(response =&gt; {
            dispatch({ 
                type: FETCH_DATA,
                payload: response 
            })
        })
    }
}
</code></pre>