I'm new to React and unsure about how to do this.

I have an array of objects that I have mapped through and rendered in my view. What I want to do is set up a form that will submit the values of each field to the corresponding properties of a new object, but I'm not sure how to go about doing this.

**Here is my initial data, which is rendered in the view:**

```
contactArray = [
  {
    name: 'John'
    email: 'john@email.com'
    number: 111-111-111
  },
  {
    name: 'Dave'
    email: 'dave@email.com'
    phone: '222-222-222'
  }
]

```

**Then I have a form:**

```
class InputForm extends Component {
  render() {
    return (   
        <form>
          <input type='text' onChange={this.handleChange}/>
          <input type='text' onChange={this.handleChange}/>
          <input type='text' onChange={this.handleChange}/>
          <button type='submit' onSubmit={this.handleSubmit}>SUBMIT</button>
        </form>
    ) 
  }

```

**Then I assume I declare the state as this:**

```
constructor(props) {
  super(props);
  this.state = {
    name: '',
    email: '',
    phone: ''
  }
}

```

**Then the submission function I don't really know how to handle...**

```
handleSubmit() {
  // not sure about this...
  this.setState({
    name: // ????
    email: // ????
    phone: // ????
  })
}

```

And then I want to clear the submit form, as well as the object that is used to push the new object, which is now in the array (I hope that makes sense...)

So, I'm not even sure how to use state in this scenario, but ultimately I want to `push()` the new object to the array that is rendered, with all the properties as they were completed in the form.

Sorry I can't be more complete with my working up to this point, but would at least appreciate some pointers on this!