When creating a search input in react it worked successfully but when removes search word from input it remove all data from array and return no thing
i need to search but when i done return array again
const [todos, setTodos] = useState([]); const searchTodo = (todoitem) => { const searchedTodo = todos.filter((todo) => { if (todo.text.toLowerCase().includes(todoitem.toLowerCase())) { return todo; } }); setTodos(searchedTodo); };
You can either create a new variable for filtered todos or use it at body without any extra field.
First, let's take a took at the first solution:
const [todos, setTodos] = useState([]); const [filteredTodos, setFilteredTodos] = useState([]); const searchTodo = (todoitem) => { const searchedTodo = todos.filter((todo) => { if (todo.text.toLowerCase().includes(todoitem.toLowerCase())) { return todo; } return searchedTodo; }); useEffect(() => { setFilteredTodos(searchTodo(todoitem)); }, [todoitem]); \\ todoitem is the text you want to search with The other way is just using the function in return body like below:
const [todos, setTodos] = useState([]); const searchTodo = (todoitem) => { const searchedTodo = todos.filter((todo) => { if (todo.text.toLowerCase().includes(todoitem.toLowerCase())) { return todo; } return searchedTodo; }); return ( <div> {searchTodo(todoitem).map(todo => (<div>{todo}</div>))} </div> ); Based on ldruskis comment:
const [todos, setTodos] = useState([]); const [filtered, setFiltered] = useState([]); const searchTodo = (todoitem) => { const searchedTodo = todos.filter((todo) => { if (todo.text.toLowerCase().includes(todoitem.toLowerCase())) { return todo; } }); setFiltered(searchedTodo); Then you add a conditional render such as:
{filtered.length > 0 ? <render filtered> : <render todos> 