How to make a table where the cells are inputs in React with Material UI

Question

I need to create a table with Material UI that will actually be a matrix, the size of this matrix will be dynamic and precise that the cells in the table are inputs to be completed and inputs will create the truth matrix that will be passed to the server and saved in the database.

I managed to generate the table with the inputs and everything else, but I don’t know how to manage state of the inputs to get the values that will be saved, until then the table code is like this:

import React, { useContext, useState } from 'react'
import {
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Grid,
Button,
Paper
} from '@material-ui/core'

import { ProjetoContext } from 'contexts/projetos'

const TabelaPonderacao = () => {
  const { projetoAtual } = useContext(ProjetoContext)
  const [matriz, setMatriz] = useState([[]])

  console.log(matriz)

  const handleClickLimpar = () => {
    console.log('Limpou')
  }

  const handleClickSalvar = () => {
    console.log(matriz)
  }

return (
 <>
  <Grid container spacing={4}>
    <Grid item>
      <TableContainer component={Paper}>
        <Table aria-label='simple table'>
          <TableHead>

            <TableRow>
              <TableCell>Poderação dos Critérios</TableCell>
              {projetoAtual.criterios.map((criterio) => (
                <TableCell key={criterio.id}>{criterio.nome}</TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {projetoAtual.criterios.map((criterio) => (
              <TableRow key={criterio.id}>
                <TableCell>{criterio.nome}</TableCell>
                {projetoAtual.criterios.map((c) => (
                  <TableCell key={c.id}>
                    <TextField
                      id='outlined-basic'
                      variant='outlined'
                      onChange={(e) => {
                        const val = e.target.value
                        setMatriz(prevState => {
                          console.log(prevState)
                          return [...prevState, prevState[0].concat(val)]
                        })
                      }}
                    />
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </Grid>

    <Grid container spacing={2} justify='flex-end'>
      <Grid item>
        <Button variant='outlined' onClick={handleClickLimpar}>
          Limpar
        </Button>
      </Grid>

      <Grid item>
        <Button variant='outlined' onClick={handleClickSalvar} color='primary'>
          Salvar
        </Button>
      </Grid>
    </Grid>
  </Grid>
 </>
 )
}

export default TabelaPonderacao

Example:

The state of inputs should return me an array with these values:

[[1,3,5,3], [1/3,1,5,7], [1/5,1/5,1,5], [1/3,1/7,1/5,1]]

and by clicking save I will make the persistence logic.

Answer 1

If updating a array of values where the input(s) will have the initial state, is more or less like this (independent of Framework Css using), example:

function App() { 
  const [items, setItems] = React.useState([
    {name: "name 1"},
    {name: "name 2"},
    {name: "name 3"},
  ]);    
  function changeItems(e, index) {        
    let it = [...items];    
    it[index].name = e.target.value;
    setItems(it);
  }
  return (
    <div>
      {items.map((item, index) =>
        (<div>
          <input 
            value={item.name} 
            key={index} 
            onChange={e => changeItems(e, index)} 
          />
         </div>
        )
      )}
      <pre>{JSON.stringify(items, null, 2)}</pre>
    </div>
  )
 }
 ReactDOM.render( <App/> , document.getElementById('root'));

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>

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

whereas the array of items with your objects will be updated and with the new values in items can be used for any purpose.

Continuing the troubleshooting, it has been reported that the data needs to be a array of array where each row is an item from array:

function App() { 
  const [items, setItems] = React.useState([
   ["0", "0", "0", "0"],
   ["1", "1", "1", "1"],
  ]);    
  function handleChange(e, position, line) {
    let it = [...items];
    it[line][position] = e.target.value;
    setItems(it);
  }
  return (
    <div>
      {items.map((array, line) => (<p>{ 
        array.map((a, position) => (
          <input 
            onChange={e => handleChange(e, position, line )}
            value={a} 
            style={{width:45, margin:3}} 
          />
        ))}
       </p>))}
      <pre>{JSON.stringify(items, null, 2)}</pre>
    </div>
  )
 }
 ReactDOM.render( <App/> , document.getElementById('root'));

<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>

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

in the example followed the logic of loading each line the data inside the input and the next line is next array and so on. In the change function the event that contains the information and the row and column that will happen the changes copies the array immutable (cannot be changed directly) and sent a new value to the new array.