javascript - render n number of components where n can change in react.js

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65849125/render-n-number-of-components-where-n-can-change-in-react-js

Answer 1

I suggest having the data needed for the component in an array, then iterate that array to create the components needed. A good example of this is a list of items, you would create the <ul>../</ul> bit and inside iterate through the array to generate the `

... items. This is no different from what you want. So

you'd define an array of objects for the data e.g.

componentData = [{
  name: 'Name 1',
}, {
  name: 'name 2'
}]

Then in your render function, have some code like:

<ul>
  {
    componentData.map(data => <li>data.name</li>);
  }
</ul>

This will iterate through the componentData, creating a new component, configured with each individual data object, one per component.