DEV Community

Cover image for 4 Easy ways to loop data in React- Array.map() method!
Shriya Dhar
Shriya Dhar

Posted on • Updated on

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
   },
 ];

Enter fullscreen mode Exit fullscreen mode

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>
    );
  };
Enter fullscreen mode Exit fullscreen mode

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>
    );
  };
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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>
    );
  };
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
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>
        );
    }
Enter fullscreen mode Exit fullscreen mode

You can read more about this topic from this article

Discussion (0)