React: Update child with parent state change

Question

I'm pretty sure I'm missing something very obvious here, but cannot seem to get this to work:

I have a parent component that calls two children.

PARENT

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

When I hover over a PropertyCard a function is called to update the state hoveredCard within the parent.

PARENT

handlePropertyCardHover = (property) => {
    this.state.hoveredCard = property.id;
}

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

MAP

<h1>{this.props.activeRef}</h1>

What am I missing?

Answer 1

When you want to change your state, you have to use this.setState.

this.setState({hoveredCard : property.id})

instead of

this.state.hoveredCard = property.id;