create the input tag by entering the required number-CodePudding

I have an input wuth "ok" button on a page and I want to write a number in my input, then by pressing the button, Input tags should be prepared for me according to the amount of the number I had entered For example, if I enter the number 4 in my input and then click the OK button, 4 input tags will be created for me.

How can I write this code in react js?

I tried the folloing code but it's not working... .

import {useState} from "react";

const makeInputComponent = () => {
    const [numberOfProcess, setNumberOfProcess] = useState(null)

    const returnInput = ()=>{
        return  <input type="text" />
    }

    const makeInput = () => {
         for (let i = 0; i < Number(numberOfProcess); i  ) {
            returnInput()
             console.log(i)
        }
    }
    return (
        <div>
            <label> enter your number </label>
            <input type="text" value={numberOfProcess} onChange={(event)=>setNumberOfProcess(event.target.value)}  />
            <button onClick={ makeInput } > ok </button>
        </div>
    )

}
export default makeInputComponent ;

CodePudding user response：

You can try this code.

  const [numInputs, setNumInputs] = useState(0)

  const createInputs = () => {
    const inputArray = []
    for (let i = 0; i < numInputs; i  ) {
      inputArray.push(<input type="text" key={i} />)
    }
    return inputArray
  }

  return (
      <div>
        <input
          type="number"
          value={numInputs}
          onChange={(e) => setNumInputs( e.target.value)}
        />
        <button onClick={createInputs}>OK</button>
        {createInputs()}
      </div>
  )

CodePudding user response：

Solution:

Here is what you can do, take the value from the input and when button is pressed with that input value create a array of that length and then map that array for creating input box.

export default function App() {
const[val,Setval]=useState("")
const[inputbox,Setinputbox]=useState([])

const handleClick=()=>{
const array=new Array(val*1).fill(0)
Setinputbox(array)
}

return (
<div className="App">
  <input type="number" value={val} onChange={e=>Setval(e.target.value)}/>
  <button onClick={handleClick}>Submit</button>
  <div>
    {inputbox.map((val,index)=>{
      return(
         <input key={index} type="text"/>
      )
    })}
  </div>
</div>
);
}