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:

1. Select all checkbox function. (i couldn't able to write for select all function)

2. How to get the values in Create button(for doing handleSubmit)

Answer 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