I have a problem when referencing the component itself to build a group of components from a list. How can I make such recursion in a component? From where I got "nodes1" call?
NotesGroup.js
import React from "react";
import Note from "./Note";
const NotesGroup = ({ notes }) => {
return (
<div>
{notes.map(({ id, note, nodes }) => {
return <Note key={id} id={id} note={note} nodes={nodes} />;
})}
</div>
);
};
export default NotesGroup;
Note.js
import React from "react";
const Note = ({ id, note, nodes }) => {
return (
<div className="note">
<span className="note__id">{id}</span>
<span className="note__note">{note}</span>
nodes ?{" "}
{nodes.map(({ id, note, nodes }) => {
return <Note key={id} id={id} note={note} nodes={nodes} />;
})}
: null
</div>
);
};
export default Note;
sample notes object (passed to NotesGroup component)
const notes = [
{
id: uuidv4(),
note: "This is a note",
nodes: [
{
id: uuidv4(),
note: "This is a note 2",
nodes: [
{
id: uuidv4(),
note: "This is a note 3",
},
],
},
{
id: uuidv4(),
note: "This is a note 4",
},
],
},
{
id: uuidv4(),
note: "This is a note 5",
}
]
You map is set up wrong. You can only pass in two params e.g value (the key of the array) index (the number of the array being rendered)
So change the following
const NotesGroup = ({ notes }) => {
return (
<div>
{notes.map(({ id, note, nodes }) => {
return <Note key={id} id={id} note={note} nodes={nodes} />;
})}
</div>
);
};
to this
const NotesGroup = ({ notes }) => {
return (
<div>
{notes.map((value, index) => {
return <Note key={index} id={value.id} note={value.note} nodes={value.nodes} />;
})}
</div>
);
};
then in Note.js you are trying to map the component that is the component itself? Assuming thats a typo you do a similar thing
change
const Note = ({ id, note, nodes }) => {
return (
<div className="note">
<span className="note__id">{id}</span>
<span className="note__note">{note}</span>
nodes ?{" "}
{nodes.map(({ id, note, nodes }) => {
return <Note key={id} id={id} note={note} nodes={nodes} />;
})}
: null
</div>
);
};
to this
const Note = ({ id, note, nodes }) => {
return (
<div className="note">
<span className="note__id">{id}</span>
<span className="note__note">{note}</span>
nodes ?{" "}
{nodes.map((value, index) => {
return <Note key={index} id={value.id} note={value.note} />; //CHECK THIS
})}
: null
</div>
);
};