0

I have a todo list fetching this endpoint

I have implemented some filters

  1. Search for title
  2. Toggling the todos completed and not
  3. Multiple select filters for id

I am now implementing the reset filters, which is refetching the todos list, this the method resetFilters

  const resetFilters = () => {
    const fetchPosts = async () => {
      setLoading(true);
      const res = await axios.get(
        "https://jsonplaceholder.typicode.com/todos/"
      );
      setIsCompleted(null);
      setSearchValue("");
      setTasks(res.data);
      setFilteredData(res.data);
      setLoading(false);
    };
    fetchPosts();
  };

The reset filter method works fine except from not cancelling the text that i have for example put in the search input, switched the toggle back or removing the id number from the Multiple select in the filters column

How can i clear all these infos out in my method resetFilters ?

I have reproduced the demo here

Koala7
  • 1,340
  • 7
  • 41
  • 83

1 Answers1

0

Your input field is uncontrolled. I have edited your demo check it out here. https://codesandbox.io/s/so-68247206-forked-vffwt?file=/src/App.js

I have added value prop to your SearchInput component so input will be controlled. Let me know if this helps

Adi
  • 164
  • 1
  • 11
  • It is not clear to me what you have done, i have seen the demo but i do not see the data clearing when i reset filters and i do not see the value prop you are saying, thanks – Koala7 Jul 08 '21 at 08:34
  • 1
    In this component https://codesandbox.io/s/so-68247206-forked-vffwt?file=/src/components/SearchInput.js I have added value prop to input field which will make input controlled. In App.js component I'm passing this value prop (searchValue state) to SearchInput component. I can see the input search field being cleared when click on reset filters. Is it not working for you? More about forms https://reactjs.org/docs/forms.html – Adi Jul 08 '21 at 08:41