I'm working on a React App where I'm passing an array that holds various values for each index and passing it to a prop, but for some reason its not displaying the text inside of my h1. I'm not receiving an error for it, and I've tried researching a bit but I'm unable to find any concrete information.
State:
var [editTask, setEditTask] = useState([]);
How I'm writing to the state(works correctly) Keep in mind, im only storing 1 element, this will never have multiple:
setEditTask([{
text: todo.text,
status: todo.status,
id: todo.id,
priority: todo.priority,
}]);
How i'm trying to get the text from the array:
return (
<div>
<h1>{props.editTask.id}</h1>
</div>
)
Try using the native javascript Object.values() method.
If you are storing only one element you don't need an array of objects. Can be done with a single object.
const [editTask, setEditTask] = useState({});
useEffect(() => {
setEditTask({
...todo,
});
}, [todo]);
// Inside component
return (
<div>
{Object.values(props.editTask).map((val) => (
<h1>{val}</h1>
))}
</div>
);
Without changing current structure
return (
<div>{ editTask.map((val) => <h1>{val.status}</h1>)}</div>
);