Estoy trabajando en una aplicación React donde paso una matriz que contiene varios valores para cada índice y la paso a un accesorio, pero por alguna razón no muestra el texto dentro de mi h1. No recibo un error por eso, y he intentado investigar un poco, pero no puedo encontrar ninguna información concreta.
Estado: var [editTask, setEditTask] = useState([]);
Cómo estoy escribiendo en el estado (funciona correctamente) Tenga en cuenta que solo estoy almacenando 1 elemento, esto nunca tendrá múltiples:
setEditTask([{ text: todo.text, status: todo.status, id: todo.id, priority: todo.priority, }]);Cómo estoy tratando de obtener el texto de la matriz:
return ( <div> <h1>{props.editTask.id}</h1> </div> )Intente usar el método nativo de javascript Object.values().
Si está almacenando solo un elemento, no necesita una matriz de objetos. Se puede hacer con un solo objeto.
const [editTask, setEditTask] = useState({}); useEffect(() => { setEditTask({ ...todo, }); }, [todo]); // Inside component return ( <div> {Object.values(props.editTask).map((val) => ( <h1>{val}</h1> ))} </div> );Sin cambiar la estructura actual
return ( <div>{ editTask.map((val) => <h1>{val.status}</h1>)}</div> );