title: multiple use state in react hooks
body: <p>I'm reading the answer of this question: <a href="https://stackoverflow.com/questions/67758359/problem-with-conditional-statements-in-react-hook">Problem with conditional statements in React Hook</a> how can I Rewrite this code with multiple use state?
  in this answer gather all the state objects to a single state.is there any way to rewrite this code with multiple and separate state?</p>
  <pre><code>const initialState = {
    movies: [],
    loading: true,
    searchKeyword: &quot;&quot;,
    filterOverSeven: false,
    filterByWatch: &quot;ALL&quot; // Can be &quot;ALL&quot; | &quot;WATCHED&quot; | &quot;NOT_WATCHED&quot;
  };
  
  const App = () =&gt; {
    const [state, setState] = useState(initialState);
  
    useEffect(() =&gt; {
      fetch(&quot;https://my-json-server.typicode.com/bemaxima/fake-api/movies&quot;)
        .then((response) =&gt; response.json())
        .then((response) =&gt; {
          setState((s) =&gt; ({
            ...s,
            movies: response.map((item) =&gt; ({
              id: item.id,
              name: item.name,
              rate: item.rate,
              watched: false
            })),
            loading: false
          }));
        });
    }, []);
  
    function handleWatchedBtn(id) {
      setState((s) =&gt; ({
        ...s,
        movies: s.movies.map((movie) =&gt; {
          if (movie.id === id) {
            return { ...movie, watched: !movie.watched };
          }
          return movie;
        })
      }));
    }
  
    function handleKeywordChange(e) {
      setState((s) =&gt; ({ ...s, searchKeyword: e.target.value }));
    }
  
    function handleOverSevenChange(e) {
      setState((s) =&gt; ({ ...s, filterOverSeven: !s.filterOverSeven }));
    }
  
    function handleWatchedChange(filter) {
      setState((s) =&gt; ({ ...s, filterByWatch: filter }));
    }
  
    function filterItems() {
      return state.movies
        .filter((item) =&gt;
          item.name.toLowerCase().includes(state.searchKeyword.toLowerCase())
        )
        .filter((item) =&gt; (state.filterOverSeven ? item.rate &gt; 7 : true))
        .filter((item) =&gt;
          state.filterByWatch === &quot;ALL&quot;
            ? true
            : item.watched === (state.filterByWatch === &quot;WATCHED&quot;)
        );
    }
  
    if (state.loading) {
      return &quot;Please wait...&quot;;
    }
  
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;div&gt;
            Keyword
            &lt;input
              type=&quot;text&quot;
              value={state.searchKeyword}
              onChange={handleKeywordChange}
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button onClick={() =&gt; handleWatchedChange(&quot;ALL&quot;)}&gt;all&lt;/button&gt;
            &lt;button onClick={() =&gt; handleWatchedChange(&quot;WATCHED&quot;)}&gt;watch&lt;/button&gt;
            &lt;button onClick={() =&gt; handleWatchedChange(&quot;NOT_WATCHED&quot;)}&gt;
              not watch
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            Only over 7.0
            &lt;input
              type=&quot;checkbox&quot;
              checked={state.filterOverSeven}
              onChange={handleOverSevenChange}
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;ul&gt;
              {filterItems().map((movie) =&gt; (
                &lt;li data-id={movie.id}&gt;
                  {`${movie.id} : ${movie.name} ${movie.rate}`}{&quot; &quot;}
                  &lt;button onClick={() =&gt; handleWatchedBtn(movie.id)}&gt;
                    {movie.watched ? &quot;Watched&quot; : &quot; Not watched&quot;}
                  &lt;/button&gt;
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p>this is my code and how I try to change that.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import { getAllMovies } from &quot;./components/Transportlayer&quot;;
  
  const App = () =&gt; {
    const [movies, setMovies] = useState([]);
    const [Keyword, setKeyword] = useState(&quot;&quot;);
    const [OverSeven, setOverSeven] = useState(false);
    const [Loading, setLoading] = useState(true);
    const [filterByWatch, setfilterByWatch] = useState(&quot;ALL&quot;);
  
    useEffect(() =&gt; {
      getAllMovies().then((response) =&gt; {
        setMovies(
          response.map((item) =&gt; ({
            id: item.id,
            name: item.name,
            rate: item.rate,
            watched: false,
          }))
        );
        setLoading(false);
      });
    }, []);
  
    function handleWatchedBtn(id) {
      setMovies({
        movies: movies.map((movie) =&gt; {
          if (movie.id === id) {
            return { movie, watched: !movie.watched };
          }
          return movie;
        })
      });
    }
  
  
    function handleKeywordChange(e) {
      setKeyword(e.target.value);
    }
  
    function handleOverSevenChange(e) {
      setOverSeven(e.target.checked);
    }
  
    function handleWatchedChange(filter) {
      setfilterByWatch({ filterByWatch: filter });
    }
  
    function filterItems() {
      return movies
        .filter((item) =&gt;
          item.name.toLowerCase().includes(Keyword.toLowerCase())
        )
        .filter((item) =&gt; (OverSeven ? item.rate &gt; 7 : true))
        .filter((item) =&gt;
           filterByWatch === &quot;ALL&quot;
            ? true
            : item.watched === (filterByWatch === &quot;WATCHED&quot;)
        );
    }
  
    if (Loading) {
      return &quot;Please wait...&quot;;
    }
  
    return (
      &lt;div&gt;
        &lt;div&gt;
          &lt;div&gt;
            Keyword
            &lt;input
              type=&quot;text&quot;
              value={Keyword}
              onChange={handleKeywordChange}
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;button onClick={() =&gt; handleWatchedChange(&quot;ALL&quot;)}&gt;all&lt;/button&gt;
            &lt;button onClick={() =&gt; handleWatchedChange(&quot;WATCHED&quot;)}&gt;done&lt;/button&gt;
            &lt;button onClick={() =&gt; handleWatchedChange(&quot;NOT_WATCHED&quot;)}&gt;
              undone
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;div&gt;
            Only over 7.0
            &lt;input
              type=&quot;checkbox&quot;
              checked={OverSeven}
              onChange={handleOverSevenChange}
            /&gt;
          &lt;/div&gt;
          &lt;div&gt;
            &lt;ul&gt;
              {filterItems().map((movie) =&gt; (
                &lt;li data-id={movie.id}&gt;
                  {`${movie.name} ${movie.rate}`}
                  &lt;button onClick={() =&gt; handleWatchedBtn(movie.id)}&gt;
                    {movie.watched ? &quot;done&quot; : &quot; undone&quot;}
                  &lt;/button&gt;
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>