0

This is related to my previous question Incase, anyone wishes to refer to it

So, I have a movieList component

 function MovieList() { const [pageOneData, setPageOneData] = useState({}); useEffect(async () => { await movieListApi.PageOneApi( (res) => { const pageOneData = res.data.page; setPageOneData(pageOneData); console.log("page one data: ", pageOneData); }, (err) => { console.log(err); } ); }, []); const movieList = pageOneData.contentItems || []; console.log(movieList); return ( <div> <h4 className="text-white p-5">{pageOneData.title}</h4> <div className="grid grid-flow-row grid-cols-3 grid-rows-3 gap-7"> <div> <img src="./assests/poster1.jpg" /> {movieList.map((movie, key) => { console.log("movie", movie); console.log("movie name", movie.name); console.log("movie posterImage", movie.posterImage); const { name } = movie; console.log("name", name); <p className="text-white">{name}</p>; })} </div> </div> </div> ); }

For some reason, I am unable to print(interpolate) data inside render. Although, that data does show up in logs though. It's probably something small and silly, just can't figure it out.

Improve this question

2 Answers 2

Reset to default
1

Inside the map function you need to return the <p> element.

{movieList.map((movie, key) => { console.log("movie", movie); console.log("movie name", movie.name); console.log("movie posterImage", movie.posterImage); const { name } = movie; console.log("name", name); return <p className="text-white">{name}</p>; })}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Argh.. !! but I do have a return above it and it does print the h4 but not the p tag
But you need it inside the map function as well
1

Its Right here. Forgot to use return. return is necessary when callback is using {}.

 {movieList.map((movie, key) => { console.log("movie", movie); console.log("movie name", movie.name); console.log("movie posterImage", movie.posterImage); const { name } = movie; console.log("name", name); return <p className="text-white">{name}</p>; })}
Improve this answer

Comments