How to transfer all the values entered by the user in the input tag into the array-CodePudding

I am writing a code that, by entering a number in the main input tag, creates an input tags for me as much as I entered.

Now I wanted to store the values in the new inputs in the array. For example, if I create four new inputs and want to enter a number in each one, I can finally have an array that has all these four numbers entered in each of my inputs.

import {useState} from "react";

const MakeNewInput = () => {

    const [numInputs, setNumInputs] = useState(null)

    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>
    )


}


export default MakeNewInput;

I tried several methods and they had problems, for example If I have 2 new inputs and I enter these two number to them : 524 , 96, my array will be like this [ 5 , 52, 524 , 9, 96 ] but I want my array will we like this [524, 96]

CodePudding user response：

You can create a new state array: inputValues where you use the index from the createInputs as the index in inputValues, this way you always know what input is located in the array:

I've added a useEffect to set the default values based on the amount of inputs. This will prevent empty indexes in the array, eg:

Values:  [
  1,
  0,
  3,
  0,
  0
]

const { useState, useEffect } = React;

const Example = () => {

    const [numInputs, setNumInputs] = useState(0);
    const [inputValues, setInputValues] = useState([]);
    
    useEffect(() => {
        setInputValues(new Array(numInputs).fill(0));
    }, [ numInputs ]);
    
    const createInputs = () => {
        const inputArray = []
        for (let i = 0; i < numInputs; i  ) {
            inputArray.push(<input type="text" id={i} onChange={onIputFill} key={i}/>)
        }
        return inputArray
    }
    
    const onIputFill = (event) => {
        let newValues = [ ...inputValues ];
        newValues[event.target.id] =  event.target.value;
        setInputValues(newValues);
    }
    
    console.log('Values: ', inputValues);

    return (
        <div>
            <input
                type="number"
                value={numInputs}
                onChange={(e) => setNumInputs( e.target.value)}
            />
            <button onClick={createInputs}>OK</button>
            {createInputs()}
        </div>
    )
}
ReactDOM.render(<Example />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

CodePudding user response：

const App = () => {
  const [number, setNumber] = React.useState("");

  const handleNumber = (e) => {
    setNumber(e.target.value);
  };

  const data = String(number).split("").map(Number);

  console.log(data);

  return (
    <div>
      <input type="number" value={number} onChange={(e) => handleNumber(e)} />
    </div>
  );
};


ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>