0

I've got a "select" component that selects the number of forms I want to display below. The form is a single component and I want to reuse it. It needs do have an independent state so I can use how many fields I want for the same form (an array of fields). Any hints about How can I render this component multiple please?

const indexes = [1, 2, 3];

const MyComponent = () => {
  const [numberOfUnits, setNumberOfUnits] = useState(1);

  const Form = () => <p>my form</p>;

  return (
      <select onChange={e => setNumberOfUnits(e.target.value)}>
        {indexes.map(index => (
          <option key={index} value={index}>
            {index}
          </option>
        ))}
      </select>

    //Here I should render X (numberOfUnits) amount of times of the Form component 
  );
};
SixtyEight
  • 2,220
  • 3
  • 14
  • 25
  • Possible duplicate of [How to loop and render elements in React.js without an array of objects to map?](https://stackoverflow.com/questions/29149169/how-to-loop-and-render-elements-in-react-js-without-an-array-of-objects-to-map) – aditya81070 Mar 20 '19 at 14:33

1 Answers1

1
import React, { useState } from "react";
import ReactDOM from "react-dom";

const indexes = [1, 2, 3];

const MyComponent = () => {
  const [numberOfUnits, setNumberOfUnits] = useState(1);

  const Form = () => <p>my form</p>;
  const formElements = [];
  for (let i = 0; i < numberOfUnits; i++) formElements.push(<Form />);

  return (
    <React.Fragment>
      <select
        onChange={e => setNumberOfUnits(e.target.value)}
      >
        {indexes.map(index => (
          <option key={index} value={index}>
            {index}
          </option>
        ))}
      </select>
      {formElements}
    </React.Fragment>
  );
};
const rootElement = document.getElementById("root");
ReactDOM.render(<MyComponent />, rootElement);
Branko Zivanovic
  • 172
  • 3