add each dynamic select in an input - reactjs

What you are trying to do can be done in 2 possible ways:

• By changing the value of the select.
• Pressing the create button.

Since I wasn't sure when you wanted to do it, I did both and you take the one that best suits your needs.

The most important thing is how you are storing the information, in your case it is an array selectedNumbers. So my recommendation is to simply add all the values ​​in the array. I have done it with a reduce Documentation here . But in the end you can do it even with one fororforEach

Step 1: Get the value

• Withreduce

const result = selectedNumbers.reduce((acc, value) => acc + +value, 0)

• WithforEach

let result = 0;
selectedNumbers.forEach((value) => { result += +value });

• Withfor

let result = 0;
for (let i = 0; i < selectedNumbers.length; i++) {
  result += +value;
}

Step 2: When to set it?

• If you have to change it every time a select changes, then it's so simple you won't have to do anything (see my full code acc)

• If you have to change it After they hit create then you need an additional variable that has this value and you update it every time they hit the create button. (see my full code confirmedAcc)

Full Code:

const Test = () => {
  const [arraySelect, setarraySelect] = useState(initialState.arraySelect);
  const [numberIni, setnumberIni] = useState(initialState.first);
  const [selectedNumbers, setSelectedNumbers] = useState([]);
  const [confirmedAcc, setConfirmedAcc] = useState(0);

  const getArray = (value) => {
    const numValue = parseInt(value, 10);
    const arr = [];
    for (let i = 0; i < numValue - 1; i++) {
      arr.push(numValue - i - 1);
    }
    if (arr.length) {
      return arr;
    }
  };
  
  const setSelect = (value) => {
    let isArray = getArray(value);
    if (isArray) {
      setarraySelect([...arraySelect, isArray]);
    }
    // Cambia cada vez que presionan el botón crear
    setConfirmedAcc(selectedNumbers.reduce((acc, value) => acc + +value, 0));
  };

  const handleChange = (index, value) => {
    const tmpSelectedNumbers = [...selectedNumbers];
    tmpSelectedNumbers[index] = value;
    setSelectedNumbers(tmpSelectedNumbers);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    setnumberIni(event.target.numberIni.value - 1);
  };

  const resetForm = () => {
    setnumberIni(null);
    setarraySelect([]);
  };

  // Cambia cada vez que cambian un select
  const acc = selectedNumbers.reduce((acc, value) => acc + +value, 0);

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input name="numberIni" type="number" />

        <input type="submit" value="Generar select" />
      </form>
      {numberIni && (
        <div>
          <select
            onChange={(e) => handleChange(0, e.target.value)}
            name=""
            id=""
          >
            <option value="seleccione">Seleccione</option>
            {Array(parseInt(numberIni))
              .fill(1)
              .map((value, key) => {
                return (
                  <option value={numberIni - key}>{numberIni - key}</option>
                );
              })}
          </select>
          <button
            type="submit"
            className="btn btn-success"
            onClick={() => {
              setSelect(selectedNumbers[0]);
            }}
          >
            crear
          </button>
          {Array(parseInt(numberIni))
            .fill(1)
            .map((value, key2) => {
              return (
                <div>
                  {arraySelect[key2] && (
                    <>
                      <select
                        onChange={(e) => handleChange(key2 + 1, e.target.value)}
                        name=""
                        id=""
                      >
                        <option value="seleccione">Seleccione</option>
                        {arraySelect[key2].map((value, key3) => {
                          return (
                            <option value={arraySelect[key2][key3]}>
                              {arraySelect[key2][key3]}
                            </option>
                          );
                        })}
                      </select>
                      <button
                        type="submit"
                        className="btn btn-success"
                        onClick={() => {
                          setSelect(selectedNumbers[key2 + 1]);
                        }}
                      >
                        crear
                      </button>
                    </>
                  )}
                </div>
              );
            })}
        </div>
      )}
      <input type="text" value={acc} /> vs{" "}
      <input type="text" value={confirmedAcc} />
      <br />
      {numberIni && (
        <input onClick={() => resetForm()} type="button" value="Reiniciar" />
      )}
    </div>
  );
};