CODEWITHSUNDEEP
reactjsjsx
user6488504
user6488504

Reputation:

Unable to map through and render data in JSX

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.

Upvotes: 0

Views: 32

Answers (2)

srinivast6
srinivast6

Reputation: 339

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>;
      })}

Upvotes: 1

MrCodingB
MrCodingB

Reputation: 2314

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>;
})}

Upvotes: 1

Related Questions