DEV Community

loading...
Cover image for Rendering Arrays in React

Rendering Arrays in React

Ajithmadhan
enthusiastic computer engineer! Motivated towards web development!
・2 min read

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.

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

Enter fullscreen mode Exit fullscreen mode

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

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

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.

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

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?

export default function App() {
  const animalList=['Lion','Tiger','Elephant','Giraffe'];
  return (
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffe</li>
  );
}
Enter fullscreen mode Exit fullscreen mode

This throws an error 🤯

Alt Text
For this you have to wrap the block using a div or ol like the below snippet

export default function App() {
  return (

        <ol>
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffee</li>
        </ol>
  );
}
Enter fullscreen mode Exit fullscreen mode

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

export default function App() {
  return (

        <React.Fragment>
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffee</li>
        </React.Fragment>
  );
}
Enter fullscreen mode Exit fullscreen mode

Fragment can be also used in short syntax like an empty tag,

export default function App() {
  return (

        <>
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffee</li>
        </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Learn more about fragment here ,React fragment

Discussion (6)

Collapse
jeremydmarx813 profile image
Jeremy Marx

Great article, but you really shouldn't use the array index of the element as the key for a react element. It can cause issues with the diffing process if the array is modified. Better to use a random number or something, like with the uuid package.

Collapse
anushibin007 profile image
Anu Shibin Joseph Raj

Ahh so this must be the culprit in my issue. I have seen that when a single object in my array changes, the whole mapped output refreshes. Could this be because I am not using an unique ID?

And I think this also means that I have to modify my array to look something like this:

const animalList=[
{id: 'a5cr', name: 'Lion'},
{id: 'hh4l', name: 'Tiger'},
{id: 'as78', name: 'Elephant'},
{id: '4ert', name: 'Giraffe'}
];

Am I right?

Collapse
jeremydmarx813 profile image
Jeremy Marx

Yea, that's the idea. I would use a package like uuid to generate the ids, since the amount on items in the array could grow.

Collapse
ajithmadhan11 profile image
Ajithmadhan Author

That's a nice catch! Thank you!

Collapse
hariprasad profile image
Hari Prasad

I was just practicing just now 😎 and you made a post on it!!!

Collapse
goodok21 profile image
Alexander Eric

Just read React docs))