title: how to auto populate data in the dialog box in react js?
body: <p>I have a root component.From that I am calling the welcome page which is displaying the details of the students already registered along with edit and delete button in each row.
  The delete function is working fine which is used to delete a row,But my requirement is that when i click on the edit button,the details of the student selected, should auto populate in the dialog box and once updating is complete,the finalized result should be published back to the starting page.
  App-->Todo.js-->EditDialog.js</p>
  
  <pre><code>App.js
  
  
  import React, { Component } from 'react';
  import FormDialog from './FormDialog'
  import Todo from './ToDo'
  import EditDialog from './EditDialog'
  
  
  
  import './App.css';
  
  
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        mode: false
      };
  
    }
  
    showForm()
    {
      this.setState({mode:!this.state.mode})
    }
  
    render() {
      return (
        &lt;div className="App"&gt;        
          &lt;button onClick={this.showForm.bind(this)}&gt;Welcome&lt;/button&gt;
          {this.state.mode? &lt;Todo/&gt;:null}
  
  
          &lt;/div&gt;
  
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Todo.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './Todo.css'
  import EditDialog from './EditDialog'
  import FormDialog from './FormDialog'
  import Dialog from '@material-ui/core/Dialog';
  import { thisExpression } from '@babel/types';
  
  class Todo extends Component {
  
    state = {    edit: false, id: null,view:false,editview:false,
      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' }
     ], }
  
  
  
     onDeleteHandle() {let id = arguments[0];
      this.setState({students:this.state.students.filter(item =&gt; {if (item.id !== id)
         {return item;}})});}
  
  
    onUpdateHandle(id,name,age,email){
  
      this.setState({students: this.state.students.map(item =&gt; {
        if (item.id === this.state.id){
          item['id'] = id;        
          item['name']=name;
          item['age']=age;
          item['email']=email;
        }return item;})})
        this.setState({edit: false});
    }
  
  
    signUpDialog(){
      this.setState({view:!this.state.view})
    }   
  
    editFormDialog(){
      this.setState({editview:!this.state.editview})
    }
  
  
    renderEditForm() {
      if (this.state.edit) {
      return &lt;form onSubmit={this.onUpdateHandle.bind(this)}&gt;
      &lt;input type="text" name="updatedItem" className="item" defaultValue={this.state.id} /&gt;
      &lt;input type="text" name="updatedItem1" className="item" defaultValue={this.state.name} /&gt;
      &lt;input type="text" name="updatedItem2" className="item" defaultValue={this.state.age} /&gt;
      &lt;input type="text" name="updatedItem3" className="item" defaultValue={this.state.email} /&gt;
      &lt;button className="update-add-item"&gt;Update&lt;/button&gt; 
      &lt;/form&gt;    }  }
  
  
      onEditHandle(event) {
      this.setState({edit: true,id: arguments[0],name:arguments[1],age:arguments[2],email:arguments[3]});}
  
  
      onSubmitHandle(id,name,age,email) { 
  
        this.setState({students: [...this.state.students, {
          id:id,
          name:name,
          age:age,
          email:email
        }]})
      }; 
  
  
  
       render() 
  
            {    
             return&lt;div style={{width: "500px",background : "beige"}} &gt;     
  
  
                    &lt;button onClick={this.signUpDialog.bind(this)}&gt;Sign-UP&lt;/button&gt;
                   {this.state.view? &lt;FormDialog details={this.onSubmitHandle.bind(this)}/&gt; :null}
  
                     &lt;table&gt;{this.state.students.map(abc =&gt; (&lt;tr&gt;&lt;td&gt;{abc.id}&lt;/td&gt;&lt;td&gt;{abc.name}&lt;/td&gt;&lt;td&gt;{abc.age}&lt;/td&gt;&lt;td&gt;{abc.email}&lt;/td&gt;&lt;td&gt;
                      &lt;button onClick={this.onDeleteHandle.bind(this, abc.id)}&gt;Delete&lt;/button&gt;&lt;/td&gt;
                      &lt;button onClick={this.editFormDialog.bind(this)}&gt;Edit&lt;/button&gt;
                      {this.state.editview? &lt;EditDialog updDetails={this.onUpdateHandle.bind(this)}/&gt;:null}
  
                      &lt;/tr&gt;))}&lt;/table&gt; &lt;/div&gt;  
                }
              }
  
                export default Todo;
  </code></pre>
  
  <p>EditDialog.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import Todo from './ToDo'
  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 EditDialog extends Component{
      constructor(props){
  
          super(props);
          this.state={editDetails: true,view:false}
      }
      onUpdateHandle(event){
          event.preventDefault();
          this.setState({students: this.state.students.map(item =&gt; {
            if (item.id === this.state.id){
              item['id'] = event.target.updatedItem.value;        
              item['name']=event.target.updatedItem1.value;
              item['age']=event.target.updatedItem2.value;
              item['email']=event.target.updatedItem3.value;
            }return item;})})
            this.setState({edit: false});
        }
      renderEditForm() {
          if (this.state.editDetails) {
          return &lt;form onSubmit={this.onUpdateHandle.bind(this)}&gt;
          &lt;input type="text" name="updatedItem" className="item" defaultValue={this.state.id} /&gt;
          &lt;input type="text" name="updatedItem1" className="item" defaultValue={this.state.name} /&gt;
          &lt;input type="text" name="updatedItem2" className="item" defaultValue={this.state.age} /&gt;
          &lt;input type="text" name="updatedItem3" className="item" defaultValue={this.state.email} /&gt;
          &lt;button className="update-add-item"&gt;Update&lt;/button&gt; 
          &lt;/form&gt;    }  }
           handleClose(){
              this.setState({view:!this.state.view})
            }
  
  
  
  
      render()
      {
       return(
       &lt;div&gt; 
  
  
            &lt;Dialog  open&gt;
            &lt;DialogTitle&gt;Edit The Details&lt;/DialogTitle&gt;
                &lt;form&gt;
                &lt;label &gt;ID&lt;/label&gt;
                     &lt;input type="number"  name="id" className="item"  /&gt;
                   &lt;label&gt;Name&lt;/label&gt;
                     &lt;input type="text" name="item" className="item"  /&gt;
                     &lt;label&gt;age&lt;/label&gt;
                     &lt;input type="number" name="xyz" className="item"  /&gt;
                     &lt;label&gt;email&lt;/label&gt;
                     &lt;input type="text" name="email" className="item"  /&gt;  
                     &lt;button className="btn-add-item" &gt;Add&lt;/button&gt; 
  
                    &lt;/form&gt;
                    &lt;Button onClick={this.handleClose.bind(this)} color="primary"&gt;
              Cancel
            &lt;/Button&gt;&lt;/Dialog&gt;   
  
  
       &lt;/div&gt; )
  
      }
  
  }
  export default EditDialog;
  </code></pre>
  
  <p>I have used Callback function and passing the updating function.
  But for the EditDialog box,the details arent autopopulating and also i need to perform the update in dialog box and publish the result back.</p>