title: How do I associate seperate state to each button?
body: <h1>Hello</h1>
  <p>I am trying to associate a like button with each <code>PaperCard</code> component as shown in the code below. I have included the relevant code. Currently, The like button shows up and every time you click it the counter increases BUT all the buttons share the same state. So I am trying to fix that. I am new to JS and React.</p>
  <p>Any help will be appreciated. Thanks!</p>
  <pre><code>function Home() {
    
    const [likes, setLikes] = useState(0);
  
    const incrementLikes = () =&gt; {
      const addToLikes = likes + 1;
      setLikes(addToLikes)
      }
    const loadMorePapers = () =&gt; {
      setVisible((prevValue) =&gt; prevValue + 3);}
  
    return (
      &lt;div&gt;
        &lt;div style={{display:'flex', justifyContent:'center'}}&gt;
        &lt;h1&gt;Latest Papers&lt;/h1&gt;
        &lt;/div&gt;
        {apiData.slice(0, visible).map((paper) =&gt; (
          &lt;Grid key={paper.title}&gt;
            &lt;button onClick={incrementLikes}&gt;Likes: {likes}&lt;/button&gt;
            &lt;PaperCard title={paper.title} abstract={paper.abstract}/&gt;
          &lt;/Grid&gt;
        ))}
        &lt;div style={{display:'flex', justifyContent: 'center'}}&gt;
        &lt;Button variant=&quot;contained&quot; onClick={loadMorePapers}&gt;Load More&lt;/Button&gt;
        &lt;/div&gt;
        &lt;/div&gt;
          
    )
        }
  </code></pre>