title: React onClick() doesn't trigger when inside map function
body: <p>I'm building my first react application and I've got an issue.</p>
  <p>I want to create a simple app where I can click on a book title in a sidebar, and see a summary of the book. I'm getting the book titles and summaries through an API I've defined locally.</p>
  <p>Right now, clicking on a book title doesn't do anything. I get an error in red in the console:</p>
  <pre><code>index.js:1 Warning: Each child in a list should have a unique &quot;key&quot; prop.
  </code></pre>
  <p>I'm calling my API like so:</p>
  <pre><code>  const [viewingId, setViewingId] = useState()
    const [bookList, setBookList] = useState([])
    const [contents, setContents] = useState({})
  
    useEffect(() =&gt; {
  
      fetch(&quot;http://localhost:5000/books&quot;)
      .then(res =&gt; res.json())
      .then(res =&gt; {setBookList(res)})
    }, [])
  
    const fetchBookSummary = (id) =&gt; {
      fetch(`http://localhost:5000/book/${id}`)
      .then(res =&gt; res.json())
      .then(res =&gt; {
        setContents({...contents, [id]: res[0]})
      })
    }
  </code></pre>
  <p>This is how I'm defining my 'onClick' function:</p>
  <pre><code>  const seeSummary = (id) =&gt; {
      fetchBookSummary(id)
      setViewingId(id)
    }
  </code></pre>
  <p>And finally, my App renders like this:</p>
  <pre><code>  return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;App-Container&quot;&gt;
          &lt;div className=&quot;BookList&quot;&gt;
            {bookList.map(book =&gt; (
              &lt;Node book={book} onClick={() =&gt; seeSummary(book.id)} /&gt;
            ))}
          &lt;/div&gt;
  
          &lt;div className=&quot;SummaryView&quot;&gt;
            {contents[viewingId]?.content?.map((summaryData =&gt; (
                &lt;Summary summaryData={summaryData}/&gt;
            )))}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I used to have just <code>onClick={seeSummary(book.id)}</code>, but I got a &quot;too many re-renders&quot; error...I'm not sure I understand what adding <code>() =&gt;</code> did.</p>
  <p>I'd like to be able to see the Summary when I click on a book. Any help is appreciated!</p>