Rendering Arrays in React
Tags: javascript, react, jsx, arrays
Published: 2021-07-17 09:00:50

This post will help you to understand how to render arrays in **jsx**  and best practice to use when rendering multiple elements within the component.One of the main advantage of modern javascript libraries is that it can automate the generation of Html using a loop ie... if we want to render multiple elements of same type a loop over a array or object does the job instead of writing chunks.

#Rendering Multiple elements
To return multiple element in react we can loop over the array using the **map()** method and return single element.
```javascript
export default function App() {
  const animalList=['Lion','Tiger','Elephant','Giraffe'];
  return (
    <div className="App">
      <h1>Render Arrays in React</h1>
      {
        animalList.map((animal)=>{
          return (<p>{animal}</p>)
        })
      }
    </div>
  );
}

```
In the above code snippet I have created an array of strings and used the **map()** method to loop over each element and this returns html for each item.You can use this method when you want to display a single element for each item in the array.

###The output for above code snippet.
![sample output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14aki4uw5w6ogsnxfill.png)

However, if you look at the console, you will see a warning that each child in an array or iterator should have a unique key.

![Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0e3a80l1ciu0qibq91p.png)

This warning appears because you try to render a collection inside a component without a key.You must have a key to render individual components.
This can be rectified by using unique key to each elements.
```javascript
export default function App() {
  const animalList=['Lion','Tiger','Elephant','Giraffe'];
  return (
    <div className="App" style={{backgroundColor:"#ececec"}}>
      <h1>Render Arrays in React</h1>
      {
        animalList.map((animal,index)=>{
          return <p key={index}>{animal}</p>
        })
      }
    </div>
  );
}
```
##Rendering Adjacent elements
In Jsx, to render more than one item you must wrap a wrapper around it.

What happens if we return more than one item in jsx using a loop?
```javascript
export default function App() {
  const animalList=['Lion','Tiger','Elephant','Giraffe'];
  return (
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffe</li>
  );
}
```
###This throws an error 🤯
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfnyv1br44wl0q9xx1es.png)
For this you have to wrap the block using a div or ol like the below snippet
```javascript
export default function App() {
  return (
      
        <ol>
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffee</li>
        </ol>
  );
}
```
##Rendering Adjacent Elements with React.fragment
Wrapping the elements in div will make the application full of divs which is usually called as 'div soup'.to fix this react released a new component known as **Fragments**
```javascript
export default function App() {
  return (
      
        <React.Fragment>
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffee</li>
        </React.Fragment>
  );
}
```

Fragment can be also used in short syntax like an empty tag,
```javascript
export default function App() {
  return (
      
        <>
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffee</li>
        </>
  );
}
```
Learn more about fragment here ,[React fragment](https://reactjs.org/docs/fragments.html)