Rendering Arrays in React

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

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.

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.

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

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

This throws an error 🤯

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

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,

export default function App() {
  return (

        <>
      <li>Lion</li>
      <li>Tiger</li>
      <li>Elephant</li>
      <li>Giraffee</li>
        </>
  );
}