How to submit the child values in parent component using reactjs?

Question

I'm new to react, my objective is to pass the values from parent to child component but don't know how to pass from parent to child component. I've given handlecheck funtion in child component and wanted to get the values in Parent (It would be difficult in retrieving the data from child to Parent, that's why wanted to give functions in Parent component and get the handleCheck function from parent to child - i don't know how to do it for parameters(e,x) ) moreover, I couldn't able to do select all in the TableSample.

Can anyone help me how to define the function in Parent component (Sample.js) and retrieving in Child component. And also can anyone help me in Selecting all data in TableSample using checkbox in Tableheader ?

TableSample.js

 <TableContainer>
          <Table stickyHeader aria-label="caption table">
            <TableHead>
              <TableRow>
                <Checkbox />
                <TableCell align="left">FirstName</TableCell>
                <TableCell align="left">LastName</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {this.state.data.map(x => (
                <TableRow>
                  <Checkbox
                    label={x}
                    key={x.toString()}
                    onChange={e => this.handleCheck(e, x)}
                    checked={this.state.checkedValues.includes(x)}
                  />

                  <TableCell>{x.firstName}</TableCell>
                  <TableCell>{x.lastName}</TableCell>
                </TableRow>
              ))}
              }
            </TableBody>
          </Table>
        </TableContainer>

Sample.js:

 <Button variant="outlined" color="primary" onClick={this.handleClick}>
          File
        </Button>
        <Dialog
          maxWidth="md"
          fullWidth={true}
          onClose={this.handleClose}
          aria-labelledby="customized-dialog-title"
          open={this.state.open}
        >
          <DialogTitle
            className="dialog-header"
            id="customized-dialog-title"
            onClose={this.handleClose}
          >
            Details
            <CloseIcon onClick={this.handleClose} />
          </DialogTitle>
          <DialogContent dividers>
            <TableSample />
          </DialogContent>
          <DialogActions dividers>
            <Button onClick={this.handleSubmit}>Create</Button>
            <Button onClick={this.handleClose}>Cancel</Button>
          </DialogActions>
        </Dialog>

I want to submit the data values in Sample.js. Can anyone help me in this query in handling functions in Parent component and passing to child component?

Issues:

Select all checkbox function. (i couldn't able to write for select all function)
How to get the values in Create button(for doing handleSubmit)

iamhuynq · Accepted Answer · 2020-06-22 02:42:22Z

1

You need to move the data state from Table to SampleModal container

constructor() {
   super();
   this.state = {
      open: false,
      data: [
        { id: 1, firstName: "ABC", lastName: "XYZ" },
        { id: 2, firstName: "EDF", lastName: "GHI" },
        { id: 3, firstName: "FHI", lastName: "NHR" }
      ],
      checkedValues: []
   };
}

handleCheck = (e, x) => {
 if(e.target.id === "checkall")
    this.setState(state => {
       if (state.checkedValues.includes("checkall"))
          return { checkedValues: [] };
       else return { checkedValues: [...this.state.data, "checkall"] };
    });
 else
    this.setState(state => {
       if (state.checkedValues.includes(x))
          return {
             checkedValues: state.checkedValues.filter(c => c !== x)
          };
       return { checkedValues: [...state.checkedValues, x] };
    });
};

handleSubmit = e => {
  e.preventDefault();
  //how to get the data value to get submit over here
  console.log(this.state.checkedValues.filter(x => x !== "checkall"));
};

then you pass props to table sample component

<TableSample
     data={this.state.data}
     handleCheck={this.handleCheck}
     checkedValues={this.state.checkedValues}
/>

then in table you pass props to each checkbox and table row

<Table stickyHeader aria-label="caption table">
        <TableHead>
          <TableRow>
            <Checkbox
              id="checkall"
              onChange={e => this.props.handleCheck(e)}
            />
            <TableCell align="left">FirstName</TableCell>
            <TableCell align="left">LastName</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {this.props.data.map(x => (
            <TableRow>
              <Checkbox
                label={x}
                key={x.toString()}
                onChange={e => this.props.handleCheck(e, x)}
                checked={this.props.checkedValues.includes(x)}
              />

              <TableCell>{x.firstName}</TableCell>
              <TableCell>{x.lastName}</TableCell>
            </TableRow>
          ))}
        </TableBody>
</Table>

you can see here CodeSandBox

edited Jun 22, 2020 at 2:42

answered Jun 22, 2020 at 2:30

iamhuynq

5,5572 gold badges17 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Arunya Over a year ago

Hi, Selectall is not working properly, when we unselect it is still showing selected items.

iamhuynq Over a year ago

@Arunya i see, i have updated answer and codesanbox, check again codesandbox

iamhuynq Over a year ago

Can you approve my answer? Thanks

Vivek Goel · Accepted Answer · 2020-06-22 01:56:28Z

0

You can use props In child component and pass the properties as states to child component.

E.g.

https://towardsdatascience.com/passing-data-between-react-components-parent-children-siblings-a64f89e24ecf?gi=55a30bc73758

answered Jun 22, 2020 at 1:56

Vivek Goel

8022 gold badges12 silver badges21 bronze badges

1 Comment

Arunya Over a year ago

I didn't get you. props in Child and states also in Child component ? Could you please explain clearly?

Collectives™ on Stack Overflow

How to submit the child values in parent component using reactjs?

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related