I wanted to create multiple dynamic input fields in reactjs

Question

<div id="options-container"></div>

<script>
  function createInputElements(num) {
    const optionsContainer = document.getElementById("options-container");
    for (let i = 0; i < num; i++) {
      const input = document.createElement("input");
      input.setAttribute("type", "text");
      input.setAttribute("placeholder", `Input ${i + 1}`);
      optionsContainer.appendChild(input);
    }
  }

  const option = 3;
  createInputElements(option);
</script>

This is javascript code to create multiple input fields dynamically based on option numbers and wanted to write in react js

Answer 1

You use the useState to do so:

 const[option,setOption]=useState(3);
  let output=[];
  for (let i=0;i<option;i++){
    output.push(<input key={"input_"+i} type="text" placeholder={"Input "+(i + 1)}/>)
  }
  return (      
      <div id="options-container">
        {output}
      </div>        
  );