title: How to add edit button and function in react.js
body: <p>i want to share this question. So, i have a form which is designed by react-bootstrap. And also use React Hooks and React Function Component. I have a form which is add new form and delete form but i don't do edit form.
  This is a return statement</p>
  <pre><code>return(
          &lt;Container&gt;
              &lt;Row&gt;
                  &lt;Col&gt;
                  &lt;Form onSubmit={handleSubmit}&gt;
                      &lt;Form.Group&gt;
                          &lt;Form.Label&gt;Name&lt;/Form.Label&gt;
                          &lt;Form.Control ref = {firstname} type=&quot;text&quot; placeholder=&quot;Name..&quot; /&gt;
                      &lt;/Form.Group&gt;
                      &lt;Form.Group&gt;
                          &lt;Form.Label&gt;Surname&lt;/Form.Label&gt;
                          &lt;Form.Control ref = {secondname} type=&quot;text&quot; placeholder=&quot;Surname..&quot; /&gt;
                      &lt;/Form.Group&gt;
                      &lt;Form.Group&gt;
                          &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
                          &lt;Form.Control ref = {email} type=&quot;email&quot; placeholder=&quot;E-Mail&quot; /&gt;
                          &lt;Form.Text&gt; Please, Enter like &quot;asd@asd.com&quot;&lt;/Form.Text&gt;
                      &lt;/Form.Group&gt;
                      &lt;Form.Group&gt;
                          &lt;Form.Label&gt;Comment&lt;/Form.Label&gt;
                          &lt;Form.Control ref = {comment} as=&quot;textarea&quot; rows={3} placeholder = &quot;Notes :)&quot;/&gt;
                      &lt;/Form.Group&gt;
                      &lt;Button className = &quot;btn-lg&quot; onClick={handleSubmit} variant=&quot;success&quot; type=&quot;submit&quot;&gt;Submit&lt;/Button&gt;
                  &lt;/Form&gt;
                  &lt;/Col&gt;
              &lt;/Row&gt;
              
              {Formss}
          &lt;/Container&gt;
      )
  </code></pre>
  <p>And then, These are the function of this return</p>
  <pre><code>const Formss = input.map((item , index) =&gt;
          {
              return(
                  &lt;Lists key = {index} item = {item} index = {index} deleteFunc={handleDelete}/&gt;
              )
          }
      )
  </code></pre>
  <pre><code>const handleSubmit = (event) =&gt; {
          event.preventDefault();
  
          const name = firstname.current.value
          const surname = secondname.current.value
          const mail = email.current.value
          const mycomment = comment.current.value
  
          const data = {id:id(),
                      name : name,
                      surname : surname,
                      mail : mail,
                      mycomment : mycomment}
      
          if(data.name &amp;&amp; data.surname &amp;&amp; data.mail &amp;&amp; data.mycomment){
              setInput([...input, data])
              firstname.current.value = &quot;&quot;
              secondname.current.value = &quot;&quot;
              email.current.value = &quot;&quot;
              comment.current.value =&quot;&quot;
          }else{
              console.log(&quot;oopss&quot;)
          }
      }
  </code></pre>
  <p>I use ref hook for handleSubmit. So, How to add edit button and edit function?</p>