React elements not showing

Question

This has probably been asked a gazillion times before and I've looked at a hundred different places and tried a 100 different ways with more and less useEffects and returns here and there but I just can't fix it!

I'm trying to display stuff from a list of movies but cannot get it to show. I can see in logs that I do have the stuff i need in "movies" in the second useEffect but it doesnt produce any elements, I only get the wrapping div.

My code rn:

const SideScroller = ({scrollerName, titles}) => {
    const [movies, setMovies] = useState([]);
    const [content, setContent] = useState();

    useEffect(() => {
        let moviesTemp = [];
        
        titles.forEach(title => {
            async function fetchData() {
                const movie = await getMovie(title);
                moviesTemp.push(movie);
            }
            fetchData();
        });
        setMovies(moviesTemp);
    }, [titles])
   
    useEffect(() => {
        console.log(movies)
        setContent(() => {
            return (
                movies.map((movie) => {
                    console.log(movie);
                    return (
                        <div className='scrollerItem'>
                            <img src={movie.Poster} alt={movie.Title}  />
                            <p>{movie.Title}</p>
                        </div>
                    );
                })
            );
        });
    }, [movies])

    return (
        <div className='sideScroller'>
            {content}
        </div>
    )
}

Are you sure setMovies(0 is called after the fetchData method finishes? — tomerpacific, May 19 '21 at 12:27
replace the `forEach` with the classic `for-of`, and it should work. — Mario Vernari, May 19 '21 at 12:28
In the _second_ useeffect I can see from console logs that the movies list is populated so I guess that part works? — Greger Sundvall, May 19 '21 at 15:07
to me, the second `useEffect` has no sense at all. Once the `movies` array is populated, why not feeding it straight into the rendering stage? — Mario Vernari, May 19 '21 at 16:23
Please check the `titles` data if there is ( `Poster` or `poster` ) and ( `Title` or `title` ) — TradeCoder, May 20 '21 at 04:40
And if those are lowercase use `movie.poster`, `movie.title` — TradeCoder, May 20 '21 at 04:42

score 0 · Answer 1 · answered May 19 '21 at 12:30

0

Try Like This

setContent(() => {
movies.map((movie) => {
console.log(movie);
return (
<div className='scrollerItem'>
<img src={movie.Poster} alt={movie.Title}  />
<p>{movie.Title}</p>
</div>
);
})
});

answered May 19 '21 at 12:30

Muhammad Semeer A

101
1
7

Still no child elements in the browser :( – Greger Sundvall May 19 '21 at 15:00
replace this `moviesTemp.push(movie);` to `setMovies((prevState) => [..movies, movie]);` – Muhammad Semeer A May 19 '21 at 15:23

Adam Jenkins · Accepted Answer · 2021-05-19T19:44:22.310

You're dropping the promise from the forEach on the floor and not awaiting it. This is actually the same as the famous How do I return the response from an asynchronous call?

    useEffect(() => {
        let moviesTemp = [];
        
        const fetch = async () => {
         await Promise.all(titles.map(title => {
            async function fetchData() {
                const movie = await getMovie(title);
                moviesTemp.push(movie);
            }
            return fetchData();
         }));
         setMovies(moviesTemp);
        }
        fetch();
    }, [titles])

Then I rewrote it a little bit for fun (not because it's necessarily any "better" than the otherway):

    useEffect(() => {
        const moviesTemp = [];
        const fetch = async (title) => moviesTemp.push(await getMovie(title))
        const fetchAll = async () => {
          await Promise.all(titles.map(fetch)); 
          setMovies(moviesTemp);
        }
        fetchAll();
    }, [titles])

EDIT: To address your second question (in the comments), it's because you've mutated state.

It's a very curious thing, but let me try to explain:

    useEffect(() => {
        let moviesTemp = [];
        
        titles.forEach(title => {
            async function fetchData() {
                const movie = await getMovie(title);
                moviesTemp.push(movie);
            }
            fetchData();
        });
        setMovies(moviesTemp);
    }, [titles])

You immediately (because the forEach is synchronous regardless of the fact it is executing an async function on each iteration) have set the new state to moviesTemp, but then, you asynchronously modified moviesTemp which is the exact same as mutating state. If you mutate stuff in react, it doesn't work.

Also, you shouldn't have a second effect, this is what your full and final component should look like:

const SideScroller = ({scrollerName, titles}) => {
    const [movies, setMovies] = useState([]);

    useEffect(() => {
        const fetchAll = async () => setMovies(
          await Promise.all(titles.map(getMovie))
        );
        fetchAll();
    }, [titles])


    return (
        <div className='sideScroller'>
           {movies.map((movie) => {
                    return (
                        <div className='scrollerItem'>
                            <img src={movie.Poster} alt={movie.Title}  />
                            <p>{movie.Title}</p>
                        </div>
                    );
                })
            }
        </div>
    )
}

This seems reasonable but to me the problem is really that in the _second_ useEffect the console logs prove I have the list of movies but it doesnt produce any elements on screen. — Greger Sundvall, May 19 '21 at 14:57
@GregerSundvall - Yeah, I didn't pay attention to your second effect. I know exactly why you are observing that behavior, because you are mutating state, but not in the standard way that most people mutate state. Your shouldn't even have a second effect, see my edit. — Adam Jenkins, May 19 '21 at 16:01

score 0 · Answer 3 · answered May 19 '21 at 12:33

Try this:

const SideScroller = ({scrollerName, titles}) => {
    const [movies, setMovies] = useState([]);

    useEffect(() => {
        async function fetchData() {
            let moviesTemp = [];
            for (const title of titles) {
                const movie = await getMovie(title);
                moviesTemp.push(movie);
            }
            setMovies(moviesTemp);
        };
        fetchData();
    }, [titles])
   
    return (
        <div className='sideScroller'>
            {movies.map((movie) => {
                    console.log(movie);
                    return (
                        <div className='scrollerItem'>
                            <img src={movie.Poster} alt={movie.Title}  />
                            <p>{movie.Title}</p>
                        </div>
                    );
                })}
        </div>
    )
}

Should there be some kind of null check for the first render where movies isnt filled? Or is it enough that that movies default to []? Anyway I still didnt get any child elements... — Greger Sundvall, May 19 '21 at 15:05
unless you set a non-array, the initial value and the subsequent `moviesTemp` are arrays, so there's no problem. I don't know how is your complete code, but here is a prototype using fake load and no images: [link](https://codesandbox.io/s/silent-water-84c1z?file=/src/App.tsx) — Mario Vernari, May 19 '21 at 16:20

React elements not showing

3 Answers3