how to prevent rendering duplicates?

user_17136490 0
Viewed 72

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.

import React, { useState } from "react";
import Header from "./Header";
import Footer from "./Footer";
import Note from "./Note";
import CreateArea from "./CreateArea";

function App() {
  const [notes, setNotes] = useState([]);

  function addNote(newNote) {
    setNotes(prevNotes => {
      return [...prevNotes, newNote];
    });
  }

  function deleteNote(id) {
    setNotes(prevNotes => {
      return prevNotes.filter((noteItem, index) => {
        return index !== id;
      });
    });
  }

  return (
    <div>
      <Header />
      <CreateArea onAdd={addNote} />
      {notes.map((noteItem, index) => {
        return (
          <React.Fragment>
          <Note
            key={index}
            id={index}
            title={noteItem.title}
            content={noteItem.content}
            onDelete={deleteNote}
          />
          {notes.map((noteItem, index) => {
            return (<>
              <Note
              onAdd={addNote}
                key={index}
                id={index}
                title={noteItem.title}
                content={noteItem.content}
                onDelete={deleteNote}
              />
              {notes.map((noteItem, index) => {
                return (
                  <Note
                    key={index}
                    id={index}
                    title={noteItem.title}
                    content={noteItem.content}
                    onDelete={deleteNote}
                  />
                );
              })}</>
            );
          })}
        </React.Fragment>);
      })}
      <Footer />
    </div>
  );
}

export default App;

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. https://codesandbox.io/s/keeper-part-3-completed-forked-8zs84v?file=/src/components/App.jsx:0-1628

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.

reactjs javascript
1 Answers

The problem is that you're nesting inside each .map. So when you're on the first .map and you're rendering out the first element, that second .map will now go through all of the elements that are contained within notes and render out each element. This will happen with every nested .map that you have.

Lets run through what your first run through the first element would be if notes contained 2 elements:

  • Map 1 would just render out one Notes component.
  • Map 2 would render out 2 Notes components, Note for the first element and the second element.
  • Map 3 would render out 4 Notes components. One for the first element and one for the second element WHEN Map 2 is on it's first element. When Map 2 is on it's second element, it will render out a Notes component again for both the first and the second elements of notes

So in total, you would have rendered out the first element 4 times and the second element 3 times for a total of 7 elements on the page when Map 1 is just on its first element. It would run through all of this again when Map 1 is rendering out for the second element; which should net you 14 Notes components.

To accomplish your ask of just rendering out 3 elements, I would either just forcefully add in extra elements to your setNotes function:

setNotes(prevNotes => {
    return [...prevNotes, newNote, newNote, newNote];
});

but if you wanted to keep that pure, you could just un-nest your .map's so that they are standalones.

If you need them to be nested, then you would need to compare the indexes at each .map level

{notes.map((noteItem, indexOne) => {
        return (
          <React.Fragment>
            <Note
              key={indexOne}
              id={indexOne}
              title={noteItem.title}
              content={noteItem.content}
              onDelete={deleteNote}
            />
            {notes.map((noteItem, indexTwo) => {
              return (
                <>
                  {
                    indexOne === indexTwo
                    ? <Note
                    onAdd={addNote}
                      key={indexTwo}
                      id={indexTwo}
                      title={noteItem.title}
                      content={noteItem.content}
                      onDelete={deleteNote}
                    />
                    : ''
                  }
                  {notes.map((noteItem, indexThree) => {
                    return (
                      indexOne === indexThree && indexTwo === indexThree
                      ? <Note
                          key={indexThree}
                          id={indexThree}
                          title={noteItem.title}
                          content={noteItem.content}
                          onDelete={deleteNote}
                        />
                      : ''
                    );
                  })}
                </>
              );
            })}
        </React.Fragment>);
})}
user_122041070
Related