title: REACT - Attach event handler to children
body: <p>I'm trying to create a Form component in react, kind of like <a href="https://jaredpalmer.com/formik/" rel="nofollow noreferrer">Formik</a>, but way simpler.</p>
  <p>The way I'm thinking involves adding a <code>onChange</code> handler to all the children. I am doing this with <code>children.map()</code>. It works, however I get a key warning</p>
  <pre><code>Warning: Each child in a list should have a unique &quot;key&quot; prop.
  </code></pre>
  <p>I know there's no way to suppress this, so maybe there's a better approach to create this Form component?
  Also, how should I approach the case when the <code>&lt;input&gt;</code> is not a direct child?</p>
  <p><strong>Edit:</strong> I know how to avoid the problem, I mainly want the best way to approach this, including cases of nested inputs.</p>
  <p>Here is how I want to use it:</p>
  <pre><code>&lt;Form&gt;
    &lt;label htmlFor=&quot;owner&quot;&gt;Owner&lt;/label&gt;
    &lt;input
      type=&quot;text&quot;
      name=&quot;owner&quot;
      id=&quot;owner&quot;
    /&gt;
    &lt;label htmlFor=&quot;description&quot;&gt;Description&lt;/label&gt;
    &lt;input
      type=&quot;text&quot;
      name=&quot;description&quot;
      id=&quot;description&quot;
    /&gt;
    &lt;input
      type=&quot;submit&quot;
      value=&quot;Submit&quot;
    /&gt;
  &lt;/Form&gt;
  </code></pre>
  <p>and here is my code:</p>
  <pre><code>import React from 'react';
      
  class Form extends React.Component {
    constructor(props) {
      super(props);
      this.state = {}
      this.handleInputChange = this.handleInputChange.bind(this);
    }
      
    handleInputChange(event) {
      const target = event.target;
      const value =
        target.type === 'checkbox' ? target.checked : target.value;
      const name = target.name;
      console.log(`${name} : ${value}`)
      this.setState({
        [name]: value
      });
    }
      
    render() {
      return (
        &lt;form&gt;
          {this.props.children.map((child) =&gt; {
            if (child.type === &quot;input&quot;) {
              return (
                &lt;input
                  onChange={this.handleInputChange}
                  {...child.props}
                /&gt;
              )
            }
          })}
        &lt;/form&gt;
      )
    }
  }
      
  export default Form;
  </code></pre>