React hook not setting the state

Question

Hey all trying to use a useState react hook to set a state but it does not work, I gone through the official documentation

Seems like i have followed it correctly but still cannot get the hook to set the state:

const [search, setSearch] = useState('');
const { films } = props;

const matchMovieSearch = (films) => {
    return films.forEach(item => {
        return item.find(({ title }) => title === search);
    });
}

const handleSearch = (e) => {
    setSearch(e.target.value);
    matchMovieSearch(films);
}




<Form.Control 
                type="text" 
                placeholder="Search Film" 
                onChange={(e) => {handleSearch(e)}}
            />

Search var in useState is allways empty even when i debug and can see that e.target.value has to correct data inputed from the html field

Answer 1

setSearch is an async call, you won't be able to get the search immediately after setting the state.

useEffect is here for rescue.

useEffect(() => {
    // your action
}, [search]);

Answer 2

Are you sure you are using the hooks inside a component, hooks can only be used in a Functional React Component.

If that is not the case, there must be something wrong with the Form.Control component, possibly like that component did not implement the onChanged parameter properly.

This is the one I tested with the html input element, and it is working fine. I used the useEffect hook to track the changes on the search variable, and the you can see that the variable is being properly updated.

https://codesandbox.io/s/bitter-browser-c4nrg

export default function App() {
  const [search, setSearch] = useState("");

  useEffect(() => {
    console.log(`search was changed to ${search}`);
  }, [search]);

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

  return (
    <input
      type="text"
      onChange={e => {
        handleSearch(e);
      }}
    />
  );
}