title: how to prevent rendering duplicates?
body: <p>Here I have this app that I am working on that generates notes of whatever I type and add in the create area. I tried nested mapping using the following code that generates 3 notes (intended) with each add click.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Header from &quot;./Header&quot;;
  import Footer from &quot;./Footer&quot;;
  import Note from &quot;./Note&quot;;
  import CreateArea from &quot;./CreateArea&quot;;
  
  function App() {
    const [notes, setNotes] = useState([]);
  
    function addNote(newNote) {
      setNotes(prevNotes =&gt; {
        return [...prevNotes, newNote];
      });
    }
  
    function deleteNote(id) {
      setNotes(prevNotes =&gt; {
        return prevNotes.filter((noteItem, index) =&gt; {
          return index !== id;
        });
      });
    }
  
    return (
      &lt;div&gt;
        &lt;Header /&gt;
        &lt;CreateArea onAdd={addNote} /&gt;
        {notes.map((noteItem, index) =&gt; {
          return (
            &lt;React.Fragment&gt;
            &lt;Note
              key={index}
              id={index}
              title={noteItem.title}
              content={noteItem.content}
              onDelete={deleteNote}
            /&gt;
            {notes.map((noteItem, index) =&gt; {
              return (&lt;&gt;
                &lt;Note
                onAdd={addNote}
                  key={index}
                  id={index}
                  title={noteItem.title}
                  content={noteItem.content}
                  onDelete={deleteNote}
                /&gt;
                {notes.map((noteItem, index) =&gt; {
                  return (
                    &lt;Note
                      key={index}
                      id={index}
                      title={noteItem.title}
                      content={noteItem.content}
                      onDelete={deleteNote}
                    /&gt;
                  );
                })}&lt;/&gt;
              );
            })}
          &lt;/React.Fragment&gt;);
        })}
        &lt;Footer /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>the issue is that when i press add again (second time after already adding 3 notes) instead of adding 3 notes, it adds like 11 new notes (some new and some of the previous added again). you can test it by copying the above code in the App.jsx in this link. <a href="https://codesandbox.io/s/keeper-part-3-completed-forked-8zs84v?file=/src/components/App.jsx:0-1628" rel="nofollow noreferrer">https://codesandbox.io/s/keeper-part-3-completed-forked-8zs84v?file=/src/components/App.jsx:0-1628</a></p>
  <p>I want it to add only 3 notes with a single click. (The components have to be nested as shown) I am trying to add an if condition where to stop rendering those multiple extra components but I am stuck.</p>