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(){
  returnthis.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 =><RowComponentkey={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.