title: create dynamic table using multidimensional array and store data in state
body: <p>I am noob in reactjs,I have started learning it this month, here I am trying to create useState variable which has data stored in  way of multidimension array, or just array. input for this variable comes from dynamic tables cells, which get created based on row number and column number.
  this link has table part created, i am facing issue with storing data in array</p>
  <p><a href="https://codesandbox.io/s/new-glitter-lepkk?file=/src/demo.js" rel="nofollow noreferrer">https://codesandbox.io/s/new-glitter-lepkk?file=/src/demo.js</a></p>
  <pre><code>import React, { Fragment, useState } from &quot;react&quot;;
  // Material-ui imports
  import { fade, withStyles } from &quot;@material-ui/core/styles&quot;;
  import { makeStyles } from &quot;@material-ui/core/styles&quot;;
  import Table from &quot;@material-ui/core/Table&quot;;
  import TableBody from &quot;@material-ui/core/TableBody&quot;;
  import TableCell from &quot;@material-ui/core/TableCell&quot;;
  import TableContainer from &quot;@material-ui/core/TableContainer&quot;;
  import TableRow from &quot;@material-ui/core/TableRow&quot;;
  import Paper from &quot;@material-ui/core/Paper&quot;;
  import InputBase from &quot;@material-ui/core/InputBase&quot;;
  import TextField from &quot;@material-ui/core/TextField&quot;;
  const useStyles = makeStyles({
    table: {
      minWidth: 650
    }
  });
  const BootstrapInput = withStyles((theme) =&gt; ({
    root: {
      &quot;label + &amp;&quot;: {
        marginTop: theme.spacing(3)
      }
    },
    input: {
      borderRadius: 4,
      position: &quot;relative&quot;,
      backgroundColor: theme.palette.common.white,
      border: &quot;1px solid #ced4da&quot;,
      fontSize: 16,
      width: &quot;60%&quot;,
      padding: &quot;5px 6px&quot;,
      transition: theme.transitions.create([&quot;border-color&quot;, &quot;box-shadow&quot;]),
      &quot;&amp;:focus&quot;: {
        boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
        borderColor: theme.palette.primary.main
      }
    }
  }))(InputBase);
  
  export default function DataTabelVariable() {
    // Table
    const classes = useStyles();
    const [rowValue, setRowValue] = useState(0);
    const [columnsValue, setColumnsValue] = useState(0);
    const [tableCellsData, setTableCellsData] = useState();
  
    // const [jsonVar, setJsonVar] = useState({});
    // var dictVarKey = {};
    // var dictVarValue = {};
    // var jsonVar = {}
  
  
    const getUniqueKeyFromArrayIndex = (rowNum, columnNum) =&gt; {
      return `${rowNum}-${columnNum}`;
    };
    // const onChangeHandler = (e) =&gt; {
    //   console.log(e.target.name, e.target.value);
    //   setTableCellsData({
    //     ...tableCellsData,
    //     [e.target.name]: e.target.value
    //   });
    // };
  
    const onChangeHandler = (e) =&gt; {
      // console.log(e.target.name, e.target.value);
      setTableCellsData({
        ...tableCellsData,
        [e.target.name]: e.target.value
    });
      // console.log(Object.keys(tableCellsData));
  
      // for (var key in tableCellsData) {
      //   var value = tableCellsData[key];
      //   const splitVar = key.split(&quot;-&quot;);
      //   if (parseInt(splitVar[0], 10) === 0) {
      //     dictVarKey[splitVar[1]] = value;
      //   } else if (parseInt(splitVar[0], 10) &gt; 0) {
      //     dictVarValue[splitVar[1]] = value;
      //   }
      // }
  
      // for (var Kkey in dictVarKey) {
      //   for (var Vkey in dictVarValue) {
      //     if (Kkey === Vkey) {
      //       jsonVar[dictVarKey[Kkey]] = dictVarValue[Vkey];
            
      //     }
      //   }
      // }
      // console.log(dictVarKey);
      // console.log(dictVarValue);
      // console.log(jsonVar);
      //   for (let i = 0; i&lt;rowValue; i++){
      //     for (let j=0;j &lt;columnsValue; j ++ ){
  
      //     }
  
      //   }
    };
  
    const generateTable = () =&gt; {
      let table = [];
      // Outer loop to create parent
      for (let i = 0; i &lt; rowValue; i++) {
        let children = [];
        //Inner loop to create children
        for (let j = 0; j &lt; columnsValue; j++) {
          children.push(
            &lt;td&gt;
              &lt;BootstrapInput
                name={getUniqueKeyFromArrayIndex(i, j)}
                onChange={onChangeHandler}
              /&gt;
            &lt;/td&gt;
          );
        }
        table.push(
          &lt;TableRow key={i}&gt;
            &lt;TableCell&gt;{children}&lt;/TableCell&gt;
          &lt;/TableRow&gt;
        );
        // console.log(tableCellsData);
      }
      return table;
    };
  
    return (
      &lt;Fragment&gt;
        &lt;div&gt;
          &lt;h5&gt;Select Row number and Columns number&lt;/h5&gt;
          &lt;div className={&quot;rowColumnsNumber&quot;} style={{ marginTop: 20 }}&gt;
            &lt;TextField
              id=&quot;Row-number&quot;
              label=&quot;Row(s)&quot;
              type=&quot;number&quot;
              InputLabelProps={{ shrink: true }}
              inputProps={{ min: &quot;0&quot;, max: &quot;1000&quot;, step: &quot;1&quot; }}
              onChange={(e) =&gt; setRowValue(e.target.value)}
              variant=&quot;outlined&quot;
            /&gt;
            &lt;TextField
              id=&quot;Columns-number&quot;
              label=&quot;Columns(s)&quot;
              type=&quot;number&quot;
              inputProps={{ min: &quot;0&quot;, max: &quot;1000&quot;, step: &quot;1&quot; }}
              InputLabelProps={{ shrink: true }}
              onChange={(e) =&gt; setColumnsValue(e.target.value)}
              variant=&quot;outlined&quot;
            /&gt;
          &lt;/div&gt;
          &lt;br /&gt;
          &lt;div className={&quot;TableContainer&quot;}&gt;
            &lt;TableContainer component={Paper}&gt;
              &lt;Table className={classes.table} aria-label=&quot;simple table&quot;&gt;
                
                &lt;TableBody&gt;{generateTable()}&lt;/TableBody&gt;
              &lt;/Table&gt;
            &lt;/TableContainer&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/Fragment&gt;
    );
  }
  </code></pre>