title: Problem with nested objects array formik and handleChange in childComponent
body: <p>I have a problem passing value to handleChange during formik validation.So I created a component whose quantity is added depending on the number of numChild. And I would like when he clicks the icon he can add any number of skills to the skills table.Can someone guide me how to do it correctly? Thanks for the tips</p>
  
  <pre><code>//Parent component
  state = {
      numChildren: 0 //
    };
  
   addComponent = () =&gt; {
      this.setState({
        numChildren: this.state.numChildren + 1
      });
    };
  
    render()
    {
      const children = []; // in loop i try created components
  
  //in this place i try set props to child component but i do something wrong and i get error
  
      for (var i = 0; i &lt; this.state.numChildren; i += 1) {
        children.push(&lt;SkillComponent key={i} name1={values.skills.basicAttack.name} 
          name2={values.skills.specialAttack.name}
          damage={values.skills.damage}
          handleChange={handleChange}/&gt;);
      }
      return(
          &lt;Formik
                initialValues={{
                  name: '',
  
  // here I try to add as many elements as the user creates skills by SkillComponent with this structure
  /*
  this my single skill
                   {
                      basicAttack: {
                        name: ''
                      },
                      specialAttack: {
                        name: ''
                      },
                      damage: 0
                    }
  */
                  skills: [
                    {
                      basicAttack: {
                        name: ''
                      },
                      specialAttack: {
                        name: ''
                      },
                      damage: 0
                    }
                  ]
                }}
                validationSchema={validationSchema}
                onSubmit={(values) =&gt; {
                  console.log("Working")
                }}
                /&gt;
                {({
                  values
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  isSubmitting
                }) =&gt; (
  
                  &lt;Form onSubmit={handleSubmit}&gt;
                      //some code
                      ... 
                      &lt;FontAwesomeIcon
                        icon={faPlus}
                        onClick={this.addComponent}// If the user clicks I will increase the numChild       
                      /&gt;
                      {children}
                  &lt;/Form&gt;
                )
              &lt;/Formik&gt;
  </code></pre>
  
  <p>And child component</p>
  
  <pre><code>class SkillComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
    render() {
      return (
        &lt;div&gt;
          &lt;Form.Group controlId='formBasicEmail'&gt;
            &lt;Form.Control
              type='text'
              name='name'
              value={this.props.name1}
              handleChage={this.props.handleChange}
            /&gt;
          &lt;/Form.Group&gt;
          &lt;Form.Group controlId='formBasicEmail'&gt;
            &lt;Form.Control
              type='text'
              name='name'
              value={this.props.name2}
              handleChage={this.props.handleChange}
            /&gt;
          &lt;/Form.Group&gt;
          &lt;Form.Group controlId='formBasicEmail'&gt;
            &lt;Form.Control
              type='text'
              name='name'
              value={this.props.damage}
              handleChage={this.props.handleChange}
            /&gt;
          &lt;/Form.Group&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SkillComponent;
  </code></pre>
  
  <p>Thanks for all the help</p>