Update in react?

Question

JavaScript

const { logout } = useAuth();
    const [tasks,setTasks] = useState([]);
    const { id } = JSON.parse(localStorage.getItem('id'));
    const [search,setSearch] = useState(null);

    const changeSearch = (e) => {
        setSearch(e.target.value)
    }

    const reviewTasks = async () => {
        await axios.get(`http://localhost:5000/task/`, {params: {id}}).then(response => {
                setTasks(response.data)
            })
    }
    const filterTask = tasks.filter(({task}) => {
        return task.includes(search)
    })

        useEffect( async () => {
            reviewTasks()
        },[])

    console.log(filterTask)
  return <div>
  
        {tasks&&
                filterTask.map((task) => (
                    <div key={task.id} className="task">
                        <p className='name'>{task.task}</p>
                        <Delete className='delete'/>
                    </div>
                ))
                }
            <div className="search-div">
            <h3>Search</h3>
                <form onSubmit={e => e.preventDefault()}>
                    <input className='search-inp' type="text" placeholder='Search a Task' onChange={changeSearch}/>
                </form>
            </div>
  </div>;
}

I do a search, but as a result it does not display tasks, everything works fine after I drive something in the input
, this is before entering something in the input


, after that it is

necessary that all tasks be shown at once!

Answer 1

const [search,setSearch] = useState(null);

change the starting value, otherwise, before replacing this state, task.includes(null) is done in the task filter and returns false, because in this function the argument is cast to a string, null turns into 'null'
const [search,setSearch] = useState('');