4 Easy ways to loop data in React- Array.map() method!

Here I will provide 4 simplest ways to use the Array map() method to iterate data in arrays with multiple objects & display their properties.

I will explain this using example data:

const books = [
    {
    name: 'Pride and Prejudice',
    author: 'Jane Austen',
    genre: "fiction",
    year_published: 1813,
    id:1

  },
 {
    name: 'The Great Gatsby',
    author: ' F. Scott Fitzgerald',
    genre: "tragedy",
    year_published: 1925,
    id:2
   },
 ];

1. Storing value of mapped array in a single variable:

Suppose we have a component named Library. One way to use the method is to store it in a variable and then use that variable:

const Library = () => {

    const bookList= books.map((book)=>
        <li>{book.name}</li>
    )
    return (
       <ul>
         {bookList}
       </ul>
    );
  };

Or

const Library = () => {

    const bookList= books.map((book)=>
         <div key={book.id}>
           <li>{book.name}</li>
           <li>{book.genre}</li>
          </div>
    )
    return (
       <ul>
         {bookList}
       </ul>
    );
  };

2. Storing value of mapped array in multiple variables:

const Library = () => {

    const bookName= books.map((book)=>
        <p key={book.id}>{book.name} </p>)

    const bookGenre= books.map((book)=>
        <li key={book.id}>{book.genre}</li>
    )


return (

     <div>
         <h1>Book Names</h1>
         {bookName}
         <h2>Book Genres</h2>
           {bookGenre}
     </div>
    );
  };

3. Inline array map() method

Curly braces insides JSX syntax can contain the javascript code. So, instead of using a variable, we can directly embed the array map() method inside JSX code.

const Library = () => {

   return (

     <div>
          <h1>Book Names</h1>
           {books.map((book)=>
             <p key={book.id}>{book.name} </p>)
            }



         <h2>Year published</h2>
           {books.map((book)=>
             <li key={book.id}>{book.year_published}</li>
            )}
       </div>
    );
  };

4. Refractor the code and use Child component

The array to be looped can be huge. To keep the code clean, it is best to refractor the JSX elements inside the parent component into a separate child component. Pass the properties through props. Also, pass the key to the child component during its instantiation.

const Library = () => {

   return (

     <div>
         {books.map((book)=>
           <Booksdata key={book.id} 
           name={book.name} 
           author={book.author}
           genre={book.genre}
           year_published={book.year_published}
             />
          )} 
     </div>
    );
  };

const Booksdata =(props)=> {

         return (
            <div >
             <h3>Book name: {props.name}</h3>
             <p>genre: {props.genre}</p>
             <p>Author name: {props.author}</p>
             <p>Year published : {props.year_published}</p>

          </div>
        );
    }

You can read more about this topic from this article