Create array of React components?

Question

Can you create an array of React elements eg something like:

const Component = () => {

  const myArray = [{<p>Hi</p>}]

  return(
    // Stuff
  )
}

The React documentation explains this in the JSX in depth part. — Emile Bergeron
– Emile Bergeron, Commented Apr 22, 2020 at 17:15

bilwit · Accepted Answer · 2020-04-22 17:16:54Z

1

Sure.

const myArray = [<p>1</p>, <p>2</p>, <p>3</p>];

// Fragment is included because everything in return needs to be wrapped in a single tag
return (
    <Fragment>{ myArray }</Fragment>
)

Also note that {'s are used to embed logic inside JSX

const foo1 = 'foo';
const foo2 = 'bar';
const myArray = [<p>{foo1}</p>, <p>{foo2}</p>];

return (
    <Fragment>
        {myArray.map((item, index) => (
            <span key={index}>
               <h1>{ 'Element #' + index }</h1>
               {item}
            </span>
        )}
    </Fragment>
)

edited Apr 22, 2020 at 17:16

answered Apr 22, 2020 at 17:02

bilwit

8191 gold badge6 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create array of React components?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related