how to use array inside useState?

Question

I am building a simple application for Calculation of Matrix, since matrix requires 9 values hence I need 9 states for storing values and calculation purpose

Use of 9 states is very lengthy, how do I use one state and create array inside it and store value like that of 9 states

use of 9 states enables ,use of 9 handlers for onchange function

Since value cannot be null, we cant create a blank array like

const [values,setValues] = useState([])

In short how do I shorten this code, how do I use loops to minimize code ,since every input is important for us???????

import React, { useState } from 'react'

function Add() {

    const [value1, setValue1] = useState(0)
    const [value2, setValue2] = useState(0)
    const [value3, setValue3] = useState(0)
    const [value4, setValue4] = useState(0)
    const [value5, setValue5] = useState(0)
    const [value6, setValue6] = useState(0)
    const [value7, setValue7] = useState(0)
    const [value8, setValue8] = useState(0)
    const [value9, setValue9] = useState(0)

    const [solution, setSolution] = useState(null)

    const changeHandler1 = (e) => {
        setValue1(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }

    const changeHandler2 = (e) => {
        setValue2(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }

    const changeHandler3 = (e) => {
        setValue3(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }

    const changeHandler4 = (e) => {
        setValue4(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }
    const changeHandler5 = (e) => {
        setValue5(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }
    const changeHandler6 = (e) => {
        setValue6(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }
    const changeHandler7 = (e) => {
        setValue7(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }
    const changeHandler8 = (e) => {
        setValue8(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }
    const changeHandler9 = (e) => {
        setValue9(e.target.value)
        console.log("handler", value1, value2, value3, value4, value5, value6, value7, value8, value9)
    }

    const solveHandler = () => {
        let sub1 = value5 * value9 - value8 * value6
        let sub2 = value4 * value9 - value7 * value6
        let sub3 = value4 * value8 - value5 * value7
        let answer = (value1 * sub1) - (value2 * sub2) + (value3 * sub3)
        setSolution(answer)
    }



    return (
        <div>{console.log("return", value1, value2, value3, value4, value5, value6, value7, value8, value9)}
            < input type="text" onChange={changeHandler1} value={value1} />
            < input type="text" onChange={changeHandler2} value={value2} />
            < input type="text" onChange={changeHandler3} value={value3} />
            <br />
            < input type="text" onChange={changeHandler4} value={value4} />
            < input type="text" onChange={changeHandler5} value={value5} />
            < input type="text" onChange={changeHandler6} value={value6} />
            <br />
            < input type="text" onChange={changeHandler7} value={value7} />
            < input type="text" onChange={changeHandler8} value={value8} />
            < input type="text" onChange={changeHandler9} value={value9} />
            <br />
            <br />
            <button onClick={solveHandler} >solve</button>
            <p>Answer : {solution}</p>
        </div>
    )
}

export default Add

modifications to the question are welcome!

Answer 1

You can use useReducer hook. E.g.

  const initialValues = {};

  for (let i = 0; i < 9; i++) {
    initialValues[i] = 0;
  }

  const [values, setValues] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
    initialValues
  );

  const changeHandler = (e) => {
    setValues({ [e.target.name]: e.target.value });
  };

  return (
    <>
      {Object.entries(values).map(([k, v]) => (
        <input name={k} type="text" onChange={changeHandler} value={v} />
      ))}
      <button onClick={solveHandler}>solve</button>
      <p>Answer: {solution}</p>
    </>
  );

In this case useReducer will work similarly to setState, update only given value.

Answer 2

I wrote code like this.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [values, setValues] = useState([0, 0, 0, 0, 0, 0, 0, 0, 0]);
  const [solution, setSolution] = useState(null);

  const handlerFun = (event, index) => {
    console.log(index);
    console.log(event);
    let temp = [...values];
    temp[index] = event.target.value;
    setValues(temp);
  };

  const solveHandler = () => {
    let sub1 = values[4] * values[8] - values[7] * values[5];
    let sub2 = values[3] * values[8] - values[6] * values[6];
    let sub3 = values[3] * values[7] - values[4] * values[6];
    let answer = values[0] * sub1 - values[1] * sub2 + values[2] * sub3;
    setSolution(answer);
  };

  return (
    <div className="App">
      {values.map((x, index) => {
        return (
          <>
            <div>
              {" "}
              <input
                type="text"
                onChange={(event) => {
                  handlerFun(event, index);
                }}
                value={x}
              />
            </div>
            <span> {(index + 1) % 3 === 0 ? <br /> : ""}</span>
          </>
        );
      })}
      <br />
      <br />
      <button onClick={solveHandler}>solve</button>
      <p>Answer : {solution}</p>
    </div>
  );
}

Work Demo

Answer 3

Use an array instead. Matrix is normally represented in array in languages.

function Add() {
  const [matrix, setMatrix] = React.useState(Array.from({ length: 8 }).fill(0));
  const [solution, setSolution] = useState(null);

  return (
    <div>
      {matrix.map((num, idx) => {
        const onChange = e => {
          const newMatrix = [...matrix];
          newMatrix[idx] = Number(e.target.value);

          setMatrix(newMatrix);
        };

        return <input type="text" onChange={onChange} value={num} />;
      })}

      <button onClick={solveHandler}>solve</button>
      <p>Answer : {solution}</p>
    </div>
  );
}