I have a problem with my react code, when I put that I want the completed and total of the todocounter to be the variables, they are not displayed on the screen as they should, being 2 of 4 all completed. But if I remove the variables and put a number, it returns the numbers with no problem, so it’s not a z-index problem.
I don’t know what to do, I’m not an expert in react or anything, I’m a student
this is my app.js
import React from 'react';
import { TodoCounter } from './TodoCounter';
import { TodoSearch } from './TodoSearch';
import { TodoList } from './TodoList';
import { TodoItem } from './TodoItem';
import { CreateTodoButton } from './CreateTodoButton';
import { Bubbles } from './Bubbles';
const defaultTodos = [
{ text: 'Cortar cebolla', completed: true },
{ text: 'Tomar el curso de Intro a React.js', completed: false },
{ text: 'Llorar con la Llorona', completed: false },
{ text: 'LALALALA', completed: false },
];
function App() {
const [todos, setTodos] = React.useState(defaultTodos);
const [searchValue, setSearchValue] = React.useState('');
const completedTodos = todos.filter(
todo => !!todo.completed //devuelve un booleano
).lenght;
const totalTodos = todos.lenght;
const searchedTodos = todos.filter(
(todo) => {
const todoText = todo.text.toLowerCase();
const searchText = searchValue.toLowerCase();
return todoText.includes(searchText)
}
);
console.log('Los usuarios buscan todos de ' + searchValue);
return (
<>
<TodoCounter
completed={completedTodos}
total={totalTodos}
/>
<TodoSearch
searchValue={searchValue}
setSearchValue={setSearchValue}
/>
<Bubbles />
<TodoList>
{searchedTodos.map(todo => ( //El metodo map crea un array a partir del array inicial
<TodoItem
key={todo.text}
text={todo.text}
completed={todo.completed}
/>
))}
{}
</TodoList>
<CreateTodoButton />
</>
);
}
export default App;
todocounter.js
import React from 'react';
import './styles/TodoCounter.css';
const TodoCounter = ({ completed, total }) => {
return (
<h1 className='todo-Title'>
Has completado <span>{completed}</span> de <span>{total}</span> TODOs
</h1>
);
}
export { TodoCounter };
This is what it looks like if I use the variables.
And this is what it looks like if I just use numbers
I tried change the const for a number and it works, but i need that the app put the correct numbers of todos completed and total for complete.
