Nested Mapping in ReactJS?-CodePudding

I am trying to map through a component (Note) and another component (newNote). like in the following App.jsx

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 (
          <Note
            key={index}
            id={index}
            title={noteItem.title}
            content={noteItem.content}
            onDelete={deleteNote}
          />
        );
      })}
 {notes.map((noteItem, index) => {
        return (
          <newNote
            key={index}
            id={index}
            title={noteItem.title}
            content={noteItem.content}
            onDelete={deleteNote}
          />
        );
      })}
      <Footer />
    </div>
  );
}

export default App;

What I need to do is map the newNote component inside the Note component like the following.

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 (
          <Note
            key={index}
            id={index}
            title={noteItem.title}
            content={noteItem.content}
            onDelete={deleteNote}
          />
          {notes.map((noteItem, index) => {
            return (
              <newNote
                key={index}
                id={index}
                title={noteItem.title}
                content={noteItem.content}
                onDelete={deleteNote}
              />
            );
          })}
        );
      })}
     
      <Footer />
    </div>
  );
}

export default App;

But it does not work. This link explains what I am trying to achieve but I need to achieve that with components. https://bobbyhadz.com/blog/react-map-nested-array

CodePudding user response：

It's like Irfanullah suggested in the comments, you need to use a fragment to wrap your nested components. Also you could avoid using return:

{notes.map((noteItem, index) => 
        (
        <div key={noteItem.id}> // preferred to avoid errors
          <Note
            id={index}
            title={noteItem.title}
            content={noteItem.content}
            onDelete={deleteNote}
          />
          {notes.map((noteItem, index) => (
              <newNote
                key={index}
                id={noteItem.id}
                title={noteItem.title}
                content={noteItem.content}
                onDelete={deleteNote}
              />
            )
          )}
        )
      </div>
      )}

Do not use index for key as it would create problems in update, delete, operations.

CodePudding user response：

when you're calling the notes.map() the first time you're getting the noteItem right?, now when you nest inside you can use the map function on the noteItem component and not the notes itself .......... Even in the source you provided he mapped the array and then during second time mapped over the object inside