@observer? #101Description
Hello,
I've been experimenting with mobserbables for a few days, and ran into an issue, but I'm not quite sure it's a bug or by design
(I'm new to react as well)
I currently have two components, a container and a child.
The container is passed a store that contains a observable array, and then is passes that array into the child.
A bit like this:
//main.jsx
<div>
<container store={store}/>
</div>
//container.jsx
//in the constructor or container.jsx I mutate the array
setTimeout( () => this.props.store.markers.newMarker() )
//or which mutates marker[0] for example
setTimeout( () => this.props.store.markers.moveMarker() )
let {zoom, markers} = this.props.store;
<div>
<p> zoom info from store {this.props.zoom}</p>
<child markers={markers}/>
</div>
//child.jsx
let {markers} = this.props
<div>
{
markers.map( (m) => {
return (<p> lat={m.lat} lng={m.lng} </p>)
})
}
</div>
I'm trying to re-render the child when I change that array on the container, so if I push a new element, or a change a current one the child.jsx will re-render to reflect that change.
The problem is the child.jsx does not re-render
However if I add the same loop in the container.jsx render(), it does.
//container.jsx
let {zoom, markers} = this.props.store;
<div>
<p> zoom info from store {this.props.zoom}</p>
{
markers.map( (m) => {
return (<p> lat={m.lat} lng={m.lng} </p>)
})
}
<child markers={markers}/>
</div>
This way the child.jsx will re-render.
Is this by design? I cannot observe an array form a child unless the parent is directly dependent (uses it on it's own render()) on it?
Thank you.