How to Concatenate JSX Elements into an Array?

Sometimes, we want to concatenate JSX elements into an array.

In this article, we’ll look at how to concatenate JSX elements into an array.

Concatenate JSX Elements into an Array

To concatenate JSX elements into an array, we can call the JavaScript array’s push instance method.

For instance, we write:

import React from "react";

export default function App() {
  const buffer = [];
  buffer.push(<div>A</div>);
  buffer.push(<div>B</div>);
  buffer.push(<div>C</div>);

  return <div>{buffer}</div>;
}

to define the buffer array.

Then we call push with different elements we want to put into it.

And then we render the buffer array’s contents on the screen by putting it in between the braces.

Now we should see:

A
B
C

displayed.

Conclusion

To concatenate JSX elements into an array, we can call the JavaScript array’s push instance method.