Там нету никакой концепции стандартная фильтрация данных по значению.Я думаю сама логика todo листа у вас не правильно написано.
Во первых компонент который рисует задачи должен быть один.Который на вход получает список задач и показывает их пользователю.ListTasks
const ListTasks = props => {
return (
<ul className="todos">
{props.todos.map(el => (
<li key={el.id}>{el.task}</li>
))}
</ul>
);
};
Еще нужен компонент который будет выполнять поиск назовем его Search
у которого есть один input
const Search = props => {
return (
<input
onChange={({ target: { value } }) => props.search(value)}
type="text"
placeholder="Search here..."
/>
);
};
Основной компонент который будет показывать этих двух и будет выполнять фильтрацию App
с функцией search
вся логика этой функции написано в комментариях внутри функции.
const App = () => {
const initialArr = [
{
id: 1,
task: "take out the trash",
status: false
},
{
id: 2,
task: "Dinner with wife",
status: true
},
{
id: 3,
task: "Meeting with Boss",
status: false
}
];
const [todos] = useState(initialArr);
const [filtered, setFiltered] = useState([]);
useEffect(
_ => {
setFiltered(todos);
},
[todos]
);
const search = val => {
//текущие задачи и новые отфильтрованные задачи
let currentTodos = [], newList = [];
if (val !== "") {
//делаем копию нашего стейта
currentTodos = todos;
//фильтруем стейт в поисках совпадений
newList = currentTodos.filter(todo => {
// значение которое пользователь ввел и которое у нас
// в стейте делаем строчными буквами чтобы конфликтов не было
// мало ли пользователь ввель строчными буквами а у нас заглавные
const lc = todo.task.toLowerCase();
const filter = val.toLowerCase();
// проверяем есть ли у нас этот элемент если есть возвращаем его
return lc.includes(filter);
});
} else {
// если в input ничего нету то есть пользователь стер то
// что ввел тогда возвращаем все задачи
newList = todos;
}
setFiltered(newList);
};
return (
<>
<Search {...{ search }} />
<ListTasks todos={filtered} />
</>
);
};
Ссылка на Codesandbox