title: Getting props from children — default values
body: <p><em>EDIT: CodePen link <a href="https://codepen.io/Eugleo/live/jOVbBpd" rel="nofollow noreferrer">here</a>.</em></p>
  <p>I'm (ab)using JSX to make a form-building 'DSL' for some of my non-technical colleagues. There's a <code>SingleChoice</code> component that can be used like this:</p>
  <pre><code>&lt;SingleChoice&gt;
    &lt;Option value=&quot;A&quot;&gt;
      // ... what to show when A is chosen
    &lt;/Option&gt;
    &lt;Option value=&quot;B&quot;&gt;
      // ... what to show when B is chosen
    &lt;/Option&gt;
  &lt;/SingleChoice&gt;
  </code></pre>
  <p>The result is a <code>&lt;div&gt;</code> full of radio button inputs, and under the block of inputs, there are the conditional elements (based on what option is chosen).</p>
  <p>In other words, the <code>Option</code> elements don't render anything by themselves, they are there just to signal to the parent how many radio buttons there are, what are their labels and what should be shown when X is chosen. They are literally empty shells, made just to carry their props, like this:</p>
  <pre><code>function Option({label, value, children}) { return &lt;&gt;&lt;/&gt; }
  </code></pre>
  <p>Yes, I could instead pass those as an array of objects <code>{ value: string, show: ReactNode }</code>, but that's not a friendly syntax for my non-dev colleagues.</p>
  <p>Now, to the question. In the parent I go through all his children and render the input based on their value:</p>
  <pre><code>...
  {children.map(ch =&gt; &lt;&gt; &lt;input ... /&gt; {ch.props.value} &lt;/&gt;)}
  ...
  </code></pre>
  <p>The problem is, this only works when I manually pass a <code>value</code> prop to the <code>Option</code> component. E.g. when I have</p>
  <pre><code>function Yes({..., value = &quot;Yes&quot;}) { ... }
  </code></pre>
  <p>and I do</p>
  <pre><code>&lt;SingleChoice&gt;
    &lt;Yes /&gt;
  &lt;/SingleChoice&gt;
  </code></pre>
  <p>the label is empty, as if it didn't see the default prop value. Why is that happening? Is it a bug? And how do I implement this properly? Remember, I don't really want to expose any of the implementation details to the user who writes the form (so no explicit callback passing).</p>
  <p>The only &quot;proper&quot; way I could think of would be creating a context with a callback in the parent, which all the children would look up and call with their values. The problem is, there would be <em>a lot</em> of contexts made and updated this way, and I fear the performance implications.</p>