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.

Answer 1

Try to use map method:

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