title: React – the right way to pass form element state to sibling/parent elements?
body: <ul>
  <li>Suppose I have a React class P, which renders two child classes, C1 and C2.</li>
  <li>C1 contains an input field. I'll refer to this input field as Foo.</li>
  <li>My goal is to let C2 react to changes in Foo.</li>
  </ul>
  <p>I've come up with two solutions, but neither of them feels quite right.</p>
  <p>First solution:</p>
  <ol>
  <li>Assign P a state, <code>state.input</code>.</li>
  <li>Create an <code>onChange</code> function in P, which takes in an event and sets <code>state.input</code>.</li>
  <li>Pass this <code>onChange</code> to C1 as a <code>props</code>, and let C1 bind <code>this.props.onChange</code> to the <code>onChange</code> of Foo.</li>
  </ol>
  <p>This works. Whenever the value of Foo changes, it triggers a <code>setState</code> in P, so P will have the input to pass to C2.</p>
  <p>But it doesn't feel quite right for the same reason: I'm setting the state of a parent element from a child element. This seems to betray the design principle of React: single-direction data flow.<br />
  <strong>Is this how I'm supposed to do it, or is there a more React-natural solution?</strong></p>
  <p>Second solution:</p>
  <p>Just put Foo in P.</p>
  <p><strong>But is this a design principle I should follow when I structure my app—putting all form elements in the <code>render</code> of the highest-level class?</strong></p>
  <p>Like in my example, if I have a large rendering of C1, I really don't want to put the whole <code>render</code> of C1 to <code>render</code> of P just because C1 has a form element.</p>
  <p>How should I do it?</p>