title: Insert duplicate row in table in reactjs
body: <p>I am new to react. I have a requirement in which if user click on <code>+</code> symbol the same <code>row</code> should be inserted just below.. I am not able to think the logic.</p>
  <p>for generating table I have written below code. I dont know what I should write to create <code>duplicate</code>.</p>
  <pre><code>{response.map((certificate: Certificate) =&gt; {
    return (
      &lt;tr key={certificate.certificateNo}&gt;
        &lt;td&gt;{certificate.certificateNo}&lt;/td&gt;
        &lt;td&gt;{certificate.sponser}&lt;/td&gt;
        &lt;td&gt;{certificate.protoColNo}&lt;/td&gt;
        &lt;td&gt;{certificate.startDate}&lt;/td&gt;
        &lt;td&gt;{certificate.endDate}&lt;/td&gt;
        &lt;td&gt;{certificate.noOfSubjects}&lt;/td&gt;
        &lt;td&gt;{certificate.country}&lt;/td&gt;
        &lt;td&gt;{certificate.requestStatus}&lt;/td&gt;
        &lt;td&gt;
          &lt;div className=&quot;btn-group mr-2&quot;&gt;
            &lt;Link
              to={`/certificates/${certificate.certificateNo}/edit`}
              className=&quot;btn btn-sm btn-outline-secondary&quot;&gt;
              &lt;i className=&quot;bi bi-pencil&quot;&gt;&lt;/i&gt;
            &lt;/Link&gt;
            &lt;Link
              to={`/certificates/${certificate.certificateNo}/edit`}
              className=&quot;btn btn-sm btn-outline-secondary&quot;&gt;
              &lt;i className=&quot;bi bi-plus-square&quot;&gt;&lt;/i&gt;
            &lt;/Link&gt;
            &lt;a href=&quot;#&quot; className=&quot;btn btn-sm btn-outline-secondary&quot;&gt;
              -
            &lt;/a&gt;
            &lt;a href=&quot;#&quot; className=&quot;btn btn-sm btn-outline-secondary&quot;&gt;
              &lt;i className=&quot;bi bi-x-circle&quot;&gt;&lt;/i&gt;
            &lt;/a&gt;
            &lt;a href=&quot;#&quot; className=&quot;btn btn-sm btn-outline-secondary&quot;&gt;
              &lt;i className=&quot;bi bi-search&quot;&gt;&lt;/i&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    );
  })}
  </code></pre>
  <p>As suggested by <code>Samet</code> below code is working. But I am passing index manually. like I have passed <code>0</code> .how to make it dynamic?</p>
  <pre><code>const copy = (index: number) =&gt; {
      const duplicatRow = response[index];
      const firstPart = response.slice(0, index + 1);
      const secondPart = response.slice(index + 1, response.length);
      const newData = [...firstPart, duplicatRow, ...secondPart];
      setResponse(newData);
  };
  
  
  
  {response.map((certificate: Certificate) =&gt; {
                                      return (
                                       &lt;tr key={certificate.certificateNo}&gt;
                                        &lt;td&gt;{certificate.certificateNo}&lt;/td&gt;
                                        &lt;td&gt;{certificate.sponser}&lt;/td&gt;
                                        &lt;td&gt;{certificate.protoColNo}&lt;/td&gt;
                                        &lt;td&gt;{certificate.startDate}&lt;/td&gt;
                                        &lt;td&gt;{certificate.endDate}&lt;/td&gt;
                                        &lt;td&gt;{certificate.noOfSubjects}&lt;/td&gt;
                                        &lt;td&gt;{certificate.country}&lt;/td&gt;
                                        &lt;td&gt;{certificate.requestStatus}&lt;/td&gt;
                                        &lt;td&gt;
                                              &lt;button className=&quot;btn btn-sm btn-outline-secondary&quot; onClick={() =&gt;copy(0)} &gt;
                                                  &lt;i className=&quot;bi bi-plus-square&quot;&gt;&lt;/i&gt;
                                              &lt;/button&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ve7RO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ve7RO.png" alt="enter image description here" /></a></p>