Q: how to implement a form IN A DIALOG BOX in react js? I am trying to add the user input to a given table.
I am having a sign up page which upon clicking opens a dialog box which asks for user details like id,name,age and email.My requirement is that when i click on the ADD button in the dialog box, the user details should populate(append) in the given table(which is also in the dialog box).
I am using Dialog API .
Here is the code for APP.js
    import React, { Component } from 'react';
    import FormDialog from './FormDialog'

    import './App.css';
    import Todo from './ToDo.js'


    class App extends Component {

      constructor(props) {
        super(props);
        this.state = {
          mode: false
        };

      }

      showForm()
      {
        this.setState({mode:!this.state.mode})
      }

      render() {
        return (
          <div className="App">        
            <button onClick={this.showForm.bind(this)}> Sign Up </button>
            {this.state.mode? <FormDialog/>:null}

            </div>

        );
      }
    }

    export default App;

And here is the FormDialog component.
import React, {Component} from 'react';
import Todo from './ToDo'
import Form from '@material-ui/core/FormControl'
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';


class FormDialog extends Component{
  constructor(props) {
    super(props);
    this.state = {
      view: true,
      students: [
        { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
        { id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
        { id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
        { id: 4, name: 'Asad', age: 25, email: 'asad@email.com' },
        { id: 5, name: 'kiwi', age: 20, email: 'kiwi@email.com' }
     ],
    };
  }
  handleClose(){
    this.setState({view:!this.state.view})
  }

  onSubmitHandle(event) { 
    event.preventDefault();
    this.setState({students: [...this.state.students, {id:event.target.id.value,name: event.target.item.value,age:event.target.xyz.value,email:event.target.email.value}]  })
      event.target.item.value = '';
      event.target.id.value = parseInt(event.target.id.value)+parseInt(1);
      event.target.email.value = '';
      event.target.xyz.value = ''}; 


      render() {

      return (
        <div> 
          <Dialog open={this.state.view} onClose={this.handleClose.bind(this)}>
            <DialogTitle>Sign Up Provide Details</DialogTitle>
            <DialogContent>

              <DialogContentText><Form onSubmit={this.onSubmitHandle.bind(this)} >
             <label >ID</label>
                   <input type="number"  name="id" className="item"  />
                 <label>Name</label>
                   <input type="text" name="item" className="item"  />
                   <label>age</label>
                   <input type="number" name="xyz" className="item"  />
                   <label>email</label>
                   <input type="text" name="email" className="item"  />
                   <button className="btn-add-item">Add</button>
                   <table>{this.state.students.map(abc => (<tr><td>{abc.id}</td><td>{abc.name}</td><td>{abc.age}</td><td>{abc.email}</td>

                    </tr>))}</table>
             </Form>
                </DialogContentText>

                </DialogContent>
                <DialogActions>

                </DialogActions>
                </Dialog>         


          </div>

      );

  }
}

export default FormDialog;

