setState isn't setting my array to the state and I don't know why

Question

EDIT: I created another react app and started over and it worked

I just started learning React and I was following alone to this tutorial when react gave me an error saying "movie is not defined". So I did some console logging and found out that setMovies(data.Search); is not actually setting the array to the useState.

function App() {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    searchMovies("superman");
  }, []);

  const searchMovies = async (title) => {
    const response = await fetch(`${API_URL}&s=${title}`);
    const data = await response.json();
    console.log(data.Search);
    setMovies(data.Search);
    console.log(movies);
  };  

  return (
    <div className='app'>
      <h1>MovieLand</h1>
      <div className='search'>
        <input placeholder='Search for movies' value="Superman" onChange={() => { }} />
        <img src={SearchIcon} alt="search" onClick={() => { }} />
      </div>

      {
        movies?.length > 0
          ? (
            <div className='container'>
              {
                movies.map((movie) => {
                  <MovieCard movie={movie} />
                })
              }
            </div>
          ) : (
            <div className='empty'>
              <h2>No movies found</h2>
            </div>
          )
      }
    </div>
  );
}

The console.log(data.Search) grabs the array of movies from the api just fine but when I try console.log(movies) it doesn't show the movies but instead gives me an empty array.

score 2 · Answer 1 · answered Feb 09 '23 at 04:16

2

setState work asynchronous so when you console.log your state after setState, your console.log will log your initialState. Try to console.log outside the function.

answered Feb 09 '23 at 04:16

Nghe Minh

173
6

Outside the function call and inside the useEffect callback function right? – Shakya Peiris Feb 09 '23 at 04:26
you can call it in useEffect like useEffect(()=>{console.log(movies)},[movies]) – Nghe Minh Feb 09 '23 at 04:32

score 1 · Answer 2 · answered Feb 09 '23 at 04:41

As @NgheMinh mentioned useState is asynchronous and you have to console.log inside a useEffect.

But the actual issue in your code is you have to returned the JSX component from the map function.

<div className='container'>
  {
    movies.map((movie) => {
      return <MovieCard movie={movie} />
    })
  }
</div>

score -3 · Answer 3 · answered Feb 09 '23 at 03:23

-3

Try this

setMovies(prev=>[...prev, data.Search])

answered Feb 09 '23 at 03:23

BGOPC

201
9

That didn't seem to work. I tried setMovies([...data.Search]) and it didn't work either – epicgaymer42069 Feb 09 '23 at 03:52

setState isn't setting my array to the state and I don't know why

3 Answers3