Estoy creando una aplicación React simple con objetivos y quiero poder marcarlos como completos, pero tengo problemas para configurar completo como verdadero una vez que hago clic en el botón completo. Aquí está mi código: actualmente puedo agregar y eliminar los objetivos, pero completo se mantiene como falso.

Aplicación.jsx:

 const [goals, setGoals] = useState([]); const [goal, setGoal] = useState({ complete: false }) function addGoal(newGoal) { setGoals((prevGoals) => { return [...prevGoals, newGoal]; }); } function deleteGoal(id) { setGoals((prevGoals) => { return prevGoals.filter((goalItem, index) => { return index !== id; }); }); } function completeGoal(id) { setGoals( goals.map(goal => { if (goal.id === id) { return { complete: !goal.complete } } return goal; }) ) } return ( <div> <Header /> <CreateGoal onAdd={addGoal} /> {goals.map((goalItem, index) => { return ( <Goal key={index} id={index} title={goalItem.title} content={goalItem.content} onDelete={deleteGoal} onComplete={completeGoal} /> ); })} </div> ); }

Aquí es después de que se agrega el objetivo y se muestra con los botones para completar y eliminar.

Meta.jsx:

 function Goal(props) { function handleClick() { props.onDelete(props.id); } function handleGoal() { props.onComplete(props.id); } return ( <div className="note"> <h1>{props.title}</h1> <p>{props.content}</p> {/* <button className="fas fa-check"></button> */} <button onClick={handleGoal} className="complete-btn"> <i className="fas fa-check"></i> </button> <button onClick={handleClick}> <i className="far fa-trash-alt"> </i></button> </div> ) } export default Goal