Ich habe eine To-Do-App in React geschrieben. Ich erstelle Komponenten für mehrere Teile. Jedes Mal, wenn ich versuche, die App auszuführen, wird sie nicht angezeigt.

Ich erhalte ständig die Fehlermeldung Uncaught TypeError: todo is undefiniert in footer.js:15.

Ich habe eine To-Do-Listen-Anwendung erstellt und alle To-Do-Elemente in ein Array mit den Verwendungsstatus-To-Do-Elementen eingefügt. Dies ist die Eigenschaft, die ich der Komponente Todocounter in der Fußzeile der Datei übergebe.

Ich habe versucht, die Requisite umzubenennen und ihre Position in der Fußzeile zu ändern, damit sie an der richtigen Stelle aufgerufen wird.

Das ist app.js:

import React, { useState } from 'react'; import './App.css'; import InputTodos from './input.js'; import ListTodos from './list.js'; import TodoCounter from './footer.js'; import ClearButton from './clearbutton.js'; function App() { // create usestates for todos const [todo, setTodo] = useState([]); // render all components i have in diffrent files return ( 
 
 
  
 
  
 
  
 
  
 
 
 ); } export default App;

Das ist footer.js:

import React, { useEffect, useState } from 'react'; import './App.css'; // use effect to show whenever the array will change from completed todos to not completed function TodoCounter(props) { const { todo } = props; const [completed, setCompleted] = useState(0); const [notCompleted, setNotCompleted] = useState(0); // filter between completed todos and not completed todos with cheackking the bolean status function counttodos(props) { const { todo } = props; return { completed: todo.filter((todo) => todo.isChecked).length, notCompleted: todo.filter((todo) => !todo.isChecked).length, }; } //with the useeffect hook set the todos on completed or not completed if sth changes on the todos useEffect(() => { const { completed, notcompleted } = counttodos(todo); setCompleted(completed); setNotCompleted(notcompleted); }, [todo]); return ( 
 
Completed: {completed}
 
Not Completed: {notCompleted}
 
Todos: {todo.length} 
 
 ); } export default TodoCounter;