How to pass data from the dialog box to a table defined in parent component.?

Question

I have a root component.From that I am going into the welcome page which is displaying the details of the users already registered in table format.There is a sign up button. Once that sign up button is clicked,a dialog box opens which asks for new user details.My requirement is that when I provide the details in the sign up box,the data should flow from the dialog box to the welcome page table.(like a CRUD form). Here is my code:

   import React, { Component } from 'react';
import './Todo.css'
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,  
    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 => {if (item.id !== id)
       {return item;}})});}


  onUpdateHandle(event){
    event.preventDefault();
    this.setState({students: this.state.students.map(item => {
      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});
  }

  signUpDialog(){
    this.setState({view:true})

  }







  renderEditForm() {
    if (this.state.edit) {
    return <form onSubmit={this.onUpdateHandle.bind(this)}>
    <input type="text" name="updatedItem" className="item" defaultValue={this.state.id} />
    <input type="text" name="updatedItem1" className="item" defaultValue={this.state.name} />
    <input type="text" name="updatedItem2" className="item" defaultValue={this.state.age} />
    <input type="text" name="updatedItem3" className="item" defaultValue={this.state.email} />
    <button className="update-add-item">Update</button> 
    </form>    }  }


    onEditHandle(event) {
    this.setState({edit: true,id: arguments[0],name:arguments[1],age:arguments[2],email:arguments[3]});}


    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 style={{width: "500px",background : "beige"}} >  



                 <button onClick={this.signUpDialog.bind(this)}>Sign-UP</button>
                 {this.state.view? <FormDialog/> :null}
                   <table>{this.state.students.map(abc => (<tr><td>{abc.id}</td><td>{abc.name}</td><td>{abc.age}</td><td>{abc.email}</td><td>
                    <button onClick={this.onDeleteHandle.bind(this, abc.id)}>Delete</button></td>
                    <button onClick={this.onEditHandle.bind(this,abc.id,abc.name,abc.age,abc.email)}>Edit</button>
                    </tr>))}</table></div>  
              }
            }

              export default Todo;

Here is the dialog box Component:

import React, {Component} 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';


class FormDialog extends Component{
  constructor(props) {
    super(props);
    this.state = {edit: false,
      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' }
     ],
    };
    this.onSubmitHandle = this.onSubmitHandle.bind(this);
  }
  handleClose(){
    this.setState({view:!this.state.view})
  }
  onDeleteHandle() {let id = arguments[0];
    this.setState({students:this.state.students.filter(item => {if (item.id !== id)
       {return item;}})});}


onEditHandle(event) 
{   
this.setState({edit:true,id: arguments[0],name:arguments[1],age:arguments[2],email:arguments[3]});

}
onUpdateHandle(event){
  event.preventDefault();
  this.setState({students: this.state.students.map(item => {
    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.edit) {
  return <form onSubmit={this.onUpdateHandle.bind(this)}>
  <input type="text" name="updatedItem" className="item" defaultValue={this.state.id} />
  <input type="text" name="updatedItem1" className="item" defaultValue={this.state.name} />
  <input type="text" name="updatedItem2" className="item" defaultValue={this.state.age} />
  <input type="text" name="updatedItem3" className="item" defaultValue={this.state.email} />
  <button className="update-add-item">Update</button> 
  </form>    }  }

  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  fullWidth open={this.state.view} onClose={this.handleClose.bind(this)}>
            <DialogTitle>Sign Up Provide Details</DialogTitle>
            <DialogContent>
            {this.renderEditForm()} 

              <DialogContentText>
                <div>    

                <form onSubmit={(e)=>this.onSubmitHandle(e)}>              

             <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>

                    <button onClick={this.onEditHandle.bind(this,abc.id,abc.name,abc.age,abc.email)}>Edit</button>
                    </tr>))}</table>
                    </form>
                    </div>

                </DialogContentText>

                </DialogContent>
                <DialogActions>

          <Button onClick={this.handleClose.bind(this)} color="primary">
            Cancel
          </Button>



                </DialogActions>
                </Dialog>         


          </div>

      );

  }
}

export default FormDialog;

You can passing a callback function to your FormDialog like this — Sandeep, Feb 07 '20 at 05:07

score 0 · Answer 1 · answered Feb 07 '20 at 05:07

0

You can pass a callback function to your FormDialog like this

<FormDialog onFormSubmission={this.onFormSubmission}/>

Please refer to below sandbox for more details. https://codesandbox.io/s/frosty-germain-2w4qs

From your popup component once signup is done call this function with this.props.onFormSubmission(data); Here data is your response received from API. This will call your onFormSubmission() method situated in parent component

answered Feb 07 '20 at 05:07

Sandeep

585
7
19

I have tried using this in Todo.js component: {this.state.view? :null} and in the FormDialog
this.onSubmitForm(e)}> and defined the onSubmitForm as onSubmitForm(event) { this.props.details(event.target.id.value); } but the value isnt passing over to the parent component i.e it is not reflecting in the already rendering table.
– aakriti priya Feb 07 '20 at 05:29
you should be getting data in onSubmitHandle() method. try putting console.log to check. Once you have the data you need to push this record into students array which is rendering the table. – Sandeep Feb 07 '20 at 06:49
updated https://codesandbox.io/s/frosty-germain-2w4qs to show how data is received in parent component. – Sandeep Feb 07 '20 at 06:51
as you can see in the code i have 4 input fields to be passed.I tried using alert and the id field is going fine in the onSubmitHandle().But what about the other 3 elements?I have name, age and email to be passed as well which i am not able to do so. – aakriti priya Feb 07 '20 at 06:56
you can just pass it in an object like {id: this.state.id, name: this.state.name} and so on. – Sandeep Feb 07 '20 at 07:19
i have passed it like onSubmitForm(event) { this.props.details(event.target.id.value,event.target.item.value,event.target.xyz.value,event.target.email.value) }; and it is reaching the parent component Todo.js.checked with alerts.I am trying to set the state using the following command line:onSubmitHandle(p1,p2,p3,p4) { alert(p1) alert(p2) alert(p3) alert(p4) this.setState({students: [...this.state.students, {id:p1,name: p2,age:p3,email:p4}] }) }; but i am unable to do so.also the re-rendering is not happening. – aakriti priya Feb 07 '20 at 08:50
check this for updating array var in state https://stackoverflow.com/questions/26253351/correct-modification-of-state-arrays-in-reactjs – Sandeep Feb 07 '20 at 09:43

How to pass data from the dialog box to a table defined in parent component.?

1 Answers1