How to render a JSX component for each item in array

Question

I need to render one jsx component for each item in an array.

import { ListView } from './components'; // Custom component

const array = ["item1","item2","item3"];

export default function App() {
    return(
      <div>
        {/* Here i want to render a <ListView /> component for each of the items in the array. */}
     </div>
   );
}

Here there are 3 items in the array so i want to render 3 different components.

Any help will be appreciated.

thedude · Accepted Answer · 2022-05-25 13:48:47Z

5

Try to use map method:

return (
 <div>{ array.map(item => <ListView key={item} item={item} /> }</div>
)

edited May 25, 2022 at 13:48

thedude

9,8371 gold badge34 silver badges33 bronze badges

answered May 25, 2022 at 6:47

Enes Can Güneş

1966 bronze badges

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

3 Comments

thedude Over a year ago

you are not passing item to ListView

Bohdan Mart Over a year ago

lol, react has so beautiful code :D

Enes Can Güneş Over a year ago

@thedude yes becuse i don't now the what is inside of ListView. I just want to explain how we display a component using an array. But you are right we can add.

Collectives™ on Stack Overflow

How to render a JSX component for each item in array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related