1

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 variable todoIndex.

  • todoIndex es una variable que contiene el valor del estado(todos) aplicando el método findIndex() 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;
2
  • Este es el error Cannot set properties of undefined (setting 'completed') ?
    – JoseMgz_Ux
    el 18 nov. 2022 a las 15:30
  • Si, ese es el error que me salta al intentar ejecutar.
    – Raru9
    el 18 nov. 2022 a las 15:38

1 respuesta 1

1

Con ojo de aguila pude ver tu error:

Estas mandando el texto de manera incorrecta en TodoItem:

Tienes esto

<TodoItem
  key={todo.text}
  text={todo.text}
  completed={todo.completed}
  onComplete={() => completeTodos(todos.text)} // ACA ESTAS HACIENDO todos.text PERO TODOS ES UN ARRAY
/>

Cambiar a:

<TodoItem
  key={todo.text}
  text={todo.text}
  completed={todo.completed}
  onComplete={() => completeTodos(todo.text)}
/>
1
  • Muchas gracias. Efectivamente, ese era el error.
    – Raru9
    el 19 nov. 2022 a las 0:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.