Tengo un problema al hacer referencia al propio componente para crear un grupo de componentes a partir de una lista. ¿Cómo puedo hacer tal recursividad en un componente? ¿De dónde recibí la llamada "nodes1"?
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;nota.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; objeto de notes de muestra (pasado al componente NotesGroup )
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", } ]Tu mapa está mal configurado. Solo puede pasar dos parámetros, por ejemplo, valor (la clave de la matriz) índice (el número de la matriz que se representa)
Así que cambia lo siguiente
const NotesGroup = ({ notes }) => { return ( <div> {notes.map(({ id, note, nodes }) => { return <Note key={id} id={id} note={note} nodes={nodes} />; })} </div> ); };a esto
const NotesGroup = ({ notes }) => { return ( <div> {notes.map((value, index) => { return <Note key={index} id={value.id} note={value.note} nodes={value.nodes} />; })} </div> ); };luego, en Note.js, ¿está tratando de asignar el componente que es el componente en sí? Asumiendo que es un error tipográfico, haces algo similar
cambio
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> ); };a esto
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> ); };