Witam,
chciałabym zamontować mechanizm który wstawia elementy wpisane w dialog panelu do odpowiednich rubryk w tabeli. Po wciśnięciu przycisk dodaj, miałby wstawiać te elementy.
Mam przygotowany dialog panel z odpowiednimi polami tekstowymi. Pokażę skróconą wersję tylko z jednym polem:

import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import AddIcon from '@material-ui/icons/Add';
import Save from "@material-ui/icons/es/Save";
import Delete from "@material-ui/icons/es/Delete";

class DialogPanel extends React.Component {
    constructor() {
        super()
        this.state = {
            open: false,
            name: '',
        };
        this.handleClickOpen = () => {
            this.setState({open: true});
        };

        this.handleClose = () => {
            this.setState(
                {
                    open: false,
                    name: 'Jan',
                },
            )
            ;

        };
    }

    render() {
        return (
            <div style={{marginTop: '15px'}}>
                <Button variant="raised" color="primary" aria-label="add"
                        onClick={this.handleClickOpen}><AddIcon/></Button>
                <Dialog
                    open={this.state.open}
                    onClose={this.handleClose}
                    aria-labelledby="form-dialog-title"
                >
                    <DialogTitle id="form-dialog-title">Adding person to table: </DialogTitle>
                    <DialogContent>
                        <DialogContentText>
                            Pleas fill data.
                        </DialogContentText>
                        <TextField
                            autoFocus
                            margin="dense"
                            id="name"
                            label="Name"
                            type="text"
                            fullWidth
                        />
</DialogContent>
                    <DialogActions>
                        <Button variant="raised" color="primary" onClick={this.handleClose} color="secondary">
                            Cancel
                            <Delete/>
                        </Button>
                        <Button variant="raised" size="small" onClick={this.handleClose} color="primary">
                            Save
                            <Save/>
                        </Button>
                    </DialogActions>
                </Dialog>
            </div>
        );
    }
}

export default DialogPanel;

I teraz chiałabym żeby po uzupełnieniu rubryki name ten element lądował do mojej tabelki.
Kod tabelki:

import React from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
        overflowX: 'auto',
    },
    table: {
        minWidth: 700,
    },
});

let id = 0;

function createData(name, lastname, location, email, status, role) {
    id += 1;
    return {name, lastname, location, email, status, role};
}

const data = [
    createData('Jan'),

];

function NextPersonTable(props) {
    const {classes} = props;

    return (
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell>Name</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map(n => {
                        return (
                            <TableRow key={n.id}>
                                <TableCell component="th" scope="row">
                                    {n.name}
                                </TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </Paper>
    );
}

NextPersonTable.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(NextPersonTable);

Nie zabardzo wiem jak taki kod powinien wyglądać no i gdzie ten mechanizm umieścić. W dialog panelu znajdują sie przyciski.
Pozdrawiam i z góry dziękuje za pomoc