title: Implement show more button in table using React Hooks
body: <p>I'm trying to implement show more button on the table with clients and theirs projects.
  This is my code</p>
  <pre><code>&lt;tbody className=&quot;text-gray-700&quot;&gt;
    {clients.map((client, i) =&gt; (
      &lt;tr key={i} className=&quot;border-b-2&quot;&gt;
        &lt;td className=&quot;pl-2&quot;&gt;
          &lt;div className=&quot;flex flex-col&quot;&gt;
            &lt;span className=&quot;ml-3 text-lg font-bold&quot;&gt;{client.name} &lt;/span&gt;
          &lt;/div&gt;
        &lt;/td&gt;
  
        &lt;td className=&quot;text-center&quot;&gt;
          {projects
            .filter((project) =&gt; project.client_id === client.id)
            .slice(0, numberOfItems)
            .map((filterProject, key) =&gt; (
              &lt;div key={filterProject.id} className=&quot;text-left mb-1 w-2/3&quot;&gt;
                &lt;div className=&quot;cursor-pointer text-base&quot;&gt;
                  {filterProject.label}
                &lt;/div&gt;
              &lt;/div&gt;
            ))}
          &lt;a
            className=&quot; text-buttonColor float-left text-left cursor-pointer text-sm&quot;
            onClick={() =&gt; setShowMore(!showMore)}
          &gt;
            click for more
          &lt;/a&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    ))}
  &lt;/tbody&gt;
  </code></pre>
  <p>where</p>
  <pre><code>const [ showMore, setShowMore ] = useState(false)
  const numberOfItems = showMore ? projects.length : 3
  </code></pre>
  <p>The problem is when I click on show more all projects of all clients are shown, and I need to show all projects of only one client which is clicked.
  Anyone have idea how to correct this?</p>