Estoy practicando React para crear un pequeña App de una lista de tareas. Cree una función que me permite indicar como completadas las tareas al darle clic al check pero al momento de darle en lugar de cambiar el estado de false a true (el check se pone de color verde) me salta un error en consola de que el array al que quiero acceder esta undefined. Paso código y repositorio:
completeTodo
: es una función flecha que recibe como argumento un texto (que es el texto de la tarea), que contiene la variabletodoIndex
.todoIndex
es una variable que contiene el valor del estado(todos) aplicando el métodofindIndex()
para que si el texto del todo coincida con el texto me devuelva el indice.newTodos
es la variable que contiene los todos ya guardados previamente en el estado de todos.
Al valor de newTodos hago el llamado del índicE[todoIndex] y establezco que a esta posición, la propiedad completed
es igual a true. Y luego sencilamente hago la modificación de los valores del estado con setTodo
y hago el llamado de la función completeTodo
en el componente que deseo.
Pero me sale undefined
y salta el error.
Link: https://github.com/Raru9c/proyecto-react-teorico.git
import React from 'react';
import { ToDoCounter } from './TodoDoCounter';
import { TodoItem } from './TodoItem';
import { TodoList } from './TodoList';
import { TodoSearch } from './TodoSearch';
import { CreateTodoButton } from './CreateTodoButton';
//import './App.css';
import "./index.css"
const defaultTodos = [
{text: 'Comprar comida', completed: true},
{text: 'Comprar dolares', completed: true},
{text: 'Comprar insumos', completed: false},
{text: "Aprender React", completed: true}
];
function App() {
const [todos, setTodo] = React.useState (defaultTodos);
const [ searchValue, setSearchValue] = React.useState ("");
const completedTodos = todos.filter (todos => !!todos.completed).length;
const totalTodos = todos.length;
let searchedTodos = [];
if (!searchValue.length >= 1) {
searchedTodos = todos;
} else {
searchedTodos = todos.filter(todo => {
const todoText = todo.text.toLowerCase();
const searchText = searchValue.toLowerCase();
return todoText.includes(searchText);
});
}
const completeTodos=(text) => {
const todoIndex= todos.findIndex(todo => todo.text === text);
// todos[todoIndex]= {
// text: todos [todoIndex].text,
// completed: true
// }
const newTodos = [...todos];
newTodos[todoIndex].completed=true;
setTodo (newTodos)
};
return (
<React.Fragment>
<ToDoCounter
totalTodos={totalTodos}
completed={completedTodos}
/>
<TodoSearch
searchValue={searchValue}
setSearchValue={setSearchValue}
/>
<TodoList>
{searchedTodos.map (todo => (
<TodoItem
key={todo.text}
text={todo.text}
completed={todo.completed}
onComplete= {() => completeTodos(todos.text)}
/>
))}
</TodoList>
<CreateTodoButton/>
</React.Fragment>
);
}
export default App;
Cannot set properties of undefined (setting 'completed')
?