title: React - Update Value Of Input After Submit
body: <p>I'm trying to make a feature where a user can edit a submitted value. So to be completely clear:</p>
  
  <ol>
  <li>You would enter some text</li>
  <li>Click submit and that value will be pushed into an array</li>
  <li>You will be able to see your value on the dom</li>
  <li>If you made an error, you can click on that input and change the value, also updating the state of that value in the already pushed array.</li>
  <li>On a button click, you will update the state and have a newly edited value.</li>
  </ol>
  
  <p>I'm stuck on the part of changing the state of the value of the pushed items in the array.</p>
  
  <p>For example:</p>
  
  <p>If I were to click on the field of 'Bob', edit it and click submit, the value of whatever I changed it to would also change the state of what was originally in my array to the new value.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>import React, { Component } from 'react'
  
  export default class App extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        notes: ['hello', 'bob'],
        val: ''
      }
    }
  
    submit = () =&gt; {
      const { notes, val } = this.state
  
      notes.push(val)
      this.setState({notes})
    }
  
    handleEdit = e =&gt; {
      console.log(e)
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;input 
            type="text" 
            onChange={e =&gt; this.setState({val: e.target.value})}
          /&gt;
  
          &lt;button onClick={this.submit}&gt;Submit&lt;/button&gt;
  
          {this.state.notes.map(item =&gt; {
            return (
             &lt;form onSubmit={e =&gt; e.preventDefault()}&gt;
               &lt;input 
                 type="text" 
                 defaultValue={item}
                 onChange={e =&gt; this.setState({val: e.target.value})}
               /&gt;
               &lt;button onClick={() =&gt; this.handleEdit(item)}&gt;Submit 
  Change&lt;/button&gt;
             &lt;/form&gt;
            )
          })}
        &lt;/div&gt;
      )
    }
  }
  </code></pre>