Search code examples
reactjsreturnrendering

How to return a mapped array in JSX?

I have imported some dummyData (1000 objects of films) to my React.js Component and I want to render the titles.

export const dummyData = [
  {
    id: 'tt0111161',
    rank: '1',
    title: 'The Shawshank Redemption',
  }

I have created an array with the whole object and I wish to show the first 3 movies.

const likedFilms = [];
for (let i = 0; i < 3; i++) {
    likedFilms.push(dummyData);
}

The issues I am having is to render the title.

I have tried using this. and without. Not sure how to access this data...

return (
        <div>
    {likedFilms.map((likedFilm) => <p>TITLE: {likedFilms.title} </p>)}
 </div> )

or TITLE: {this.likedFilms.title}

Mapping does work as it shows me: TITLE: TITLE: TITLE:

But it doesnt render the title.

Solution

  • edit your return, you are accessing likedFilmS instead of likedFilm, in the example I've changed the name to film

    {likedFilms.map(film => <p>TITLE: {film.title} </p>)}