title: How to input array to another array reactjs
body: <p>Hi I'm a beginner in reactjs, I'm trying map array and insert the file into another array, and after insert, I map the file into the table, but I got Error &quot;Maximum update depth exceeded&quot;</p>
  <p>This is my code</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import &quot;../Components.css&quot;;
  import { MDBDataTable } from &quot;mdbreact&quot;;
  import AuthService from &quot;../../Services/AuthService&quot;;
  // import AuthService from &quot;../Services/AuthService&quot;;
  
  export default function Dataadmin() {
    const [Searchfile, setSearchfile] = useState([]);
    const [data, setData] = useState({
      columns: [
        {
          label: &quot;No&quot;,
          field: &quot;no&quot;,
          sort: &quot;asc&quot;,
        },
        {
          label: &quot;Title&quot;,
          field: &quot;title&quot;,
          sort: &quot;asc&quot;,
        },
        {
          label: &quot;Singer&quot;,
          field: &quot;singer&quot;,
          sort: &quot;asc&quot;,
        },
        {
          label: &quot;Genre&quot;,
          field: &quot;genre&quot;,
          sort: &quot;asc&quot;,
        },
        {
          label: &quot;Country&quot;,
          field: &quot;country&quot;,
          sort: &quot;asc&quot;,
        },
        {
          label: &quot;Action&quot;,
          field: &quot;action&quot;,
          sort: &quot;asc&quot;,
        },
      ],
      rows: [],
    });
    AuthService.getalldata().then((res) =&gt; {
      setSearchfile(res.data);
    });
  
    useEffect(() =&gt; {
      Searchfile.map((item, index) =&gt; {
        const cloned = { ...data };
        cloned.rows.push({
          no: index + 1,
          title: item.title,
          singer: item.singer,
          genre: item.genre,
          country: item.country,
          action: (
            &lt;&gt;
              &lt;button className=&quot;btn-action&quot;&gt;
                &lt;i className=&quot;fas fa-pencil-alt&quot;&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;button className=&quot;btn-action&quot; style={{ marginLeft: &quot;1vh&quot; }}&gt;
                &lt;i className=&quot;far fa-trash-alt&quot;&gt;&lt;/i&gt;
              &lt;/button&gt;
            &lt;/&gt;
          ),
        });
        setData(cloned);
      });
    }, [Searchfile, data]);
    return (
      &lt;div className=&quot;div-admin&quot;&gt;
        &lt;div className=&quot;table-adminss&quot;&gt;
          &lt;MDBDataTable
            className=&quot;mytable-admin&quot;
            striped
            bordered
            small
            data={data}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/5KYoz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5KYoz.png" alt="This is the result" /></a></p>
  <p>Can someone explain to me why I get an error and how to fix it? , hope you guys understand what I'm asking :D</p>