How To Insert A New Row In Material-UI?

I'm developing a contacts application where all data is stored on client-side temporarily. I've used material-ui table to display the contacts. When add new contact button on the

Solution 1:

Maintain an array in state variable, when you click on submit in Dialog, push that data in state array. Use the array to generate the rows dynamically, like this:

<Table>
    <TableHeader>
        <TableRow>
            /*Define the headers*/
        </TableRow>
    </TableHeader>
    <TableBody>
        {this._generateRows()}
    </TableBody>
</Table>

Write the _generateRows function like this to generate the rows:

_generateRows(){
  return this.state.data.map(el => {
    return <TableRow>
              <TableRowColumn>{el.a}</TableRowColumn>
              <TableRowColumn>{el.b}</TableRowColumn>
              <TableRowColumn>{el.c}</TableRowColumn>
          </TableRow>
    })
}

Reference : Material-UI table.

Note: Replace el.a, el.b, el.c with the original data.

Solution 2:

I see you are using react. This means that when you bind a list of items to the row components in your render function.

{list.map(item => <RowComponent key={item.id}/>)}

Now when you click the button all you have to do is push to this list and your new row is rendered on screen.