使用React Component重复HTML部分

Question

I'my trying to duplicate a React Component with another component.

My component to repeat a section

class RepeatHtml extends React.Component {
render() {
    var names = new Array(parseInt(this.props.number)).fill().map((_, i) => i);
    var namesList = names.map(function (name, index) {
        return (
            <li>{index + 1}</li>);
    });
    return <ul>{ namesList }</ul>
    }
}

And I want to repeat another component of my choice with that, like

<RepeatHtml number="5" child="<InputElement />" />

Is it possible how ?

Answer 1

<Repeat num={ num } component={ InputElement } />

const Repeat = ({ num, component as Component }) => (
  <ul>
    {
      ...
      names.map(name => (
        <li key={ uniqueKey }>
          <Component />
        </li>
      )
    }
  </ul>
)

You pass the component as props, dont use JSX. and then inside your map, render it as JSX.