JavaScript | ReactJS: Parent State-Change Not Triggering Child Props Update
<h3>Parent setState Triggers <code>render()</code>, but Child Component's Props Are Static</h3>

<p>This is pretty straight-forward. I have <code>&lt;Parent /&gt;</code> with a state-property and a handler. Parent passes down both the property and the handler to the child.</p>

<p>The child has a button and invokes its own handler which wraps Parent's handler. A boolean, <code>isNew</code>, is passed to Parent -- Parent calls <code>this.setState({ isNew: isNew })</code>.</p>

<p>Parent always calls <code>render</code> and outputting <code>isNew</code> in Parent's HTML shows all is correct. However, <code>&lt;Child isNew={this.state.isNew} /&gt;</code> never outputs the correct value from <code>this.props.isNew</code> -- its always what value is initialized in Parent inside of Parent's <code>getInitialProps</code> method.</p>

<p>I just came into this project, but I don't believe we're implementing Flux or Redux within. My assumption was that React, out of the box, <strong>should rerender all children whose props are set to the parent's state</strong>.</p>

<p>In other words, if I have the following:</p>

<pre><code>React.createClass({
    render: function () {
        return (&lt;Child isNew={this.state.isNew} handler={this.handler} /&gt;);
    }
});
</code></pre>

<p>When the parent re-renders [from a state-change], all children who rely on the parent's state should also rerender while encapsulating the new state of the parent in its props; assuming a child prop of <code>&lt;Child property={this.state.property} /&gt;</code></p>

<p>Am I totally missing something basic here?</p>

<p>Please set me straight on this :)</p>

<p>Thx</p>