React: Update child with parent state change
<p>I'm pretty sure I'm missing something very obvious here, but cannot seem to get this to work:</p>

<p>I have a parent component that calls two children.</p>

<p>PARENT</p>

<pre><code>&lt;PropertyCard model={property} onMouseOver={this.handlePropertyCardHover.bind(this, property)} /&gt;
&lt;Map markers={places} options={mapOptions} activeRef={this.state.hoveredCard} /&gt;
</code></pre>

<p>When I hover over a PropertyCard a function is called to update the state <code>hoveredCard</code> within the parent.</p>

<p>PARENT</p>

<pre><code>handlePropertyCardHover = (property) =&gt; {
    this.state.hoveredCard = property.id;
}
</code></pre>

<p>This part works and I can see the parent state being updated yet when it is passed down to the second child, <code>Map</code> nothing is updated.</p>

<p>MAP</p>

<pre><code>&lt;h1&gt;{this.props.activeRef}&lt;/h1&gt;
</code></pre>

<p>What am I missing?</p>