I am creating a webpage that contains a table. [Table data](https://i.stack.imgur.com/DDrbE.png)

Now I want to update table row data on click (table row). I have done the "on click" part. After clicking on table row: [This child page opens](https://i.stack.imgur.com/5TrlU.png)

Now I want to pass table row data on click to the child component form textboxes. How can I do that?

Parent component code: 

```
  export class QuotationForm extends React.Component<AllProps>{
      public componentDidMount() {
        const { data } = this.props;
        if (data.length === 0) {
          this.props.fetchRequest()
        }
      }
      public render() {
        const { loading, data, errors } = this.props
        console.log(errors);
        return (
          <Page>
                {loading && (
                  <LoadingOverlay>
                    <LoadingOverlayInner>
                      <LoadingSpinner />
                    </LoadingOverlayInner>
                  </LoadingOverlay>
                )}
                {/* <p>
                  <small>Quotation Data Of Shiping</small>
                </p> */}
                {this.renderData(loading, data)} 
          </Page>
        )
      }
      handleClick(quot:any){
        alert(quot.quotationNumber)
        console.log("passing data",quot)
      }
      private renderData(loading: boolean, data: IQuotation[]) {
        const { classes }: any = this.props;
        console.log("Quotation Data", this.props)
        return (
          <div className={classes.section}>
            <Table className={classes.tableStyle}>
              <TableHead className={classes.thead} >
                <TableRow >
                  <TableCell className={classes.tcell}>QuotationNumber</TableCell>
                  <TableCell className={classes.tcell}>Date</TableCell>
                  <TableCell className={classes.tcell}>Quoted To</TableCell>
                  <TableCell className={classes.tcell}>Quoted By</TableCell>
                  <TableCell className={classes.tcell}>Valid Till</TableCell>
                  <TableCell className={classes.tcell}>Valid From</TableCell>
                  <TableCell className={classes.tcell}>Services</TableCell>
                  <TableCell className={classes.tcell}>Status</TableCell>
                  <TableCell className={classes.tcell}>Location</TableCell>
                </TableRow>
              </TableHead>
              {loading && data.length === 0}

              {data.map((quot) => (

              <TableBody className={classes.tbody}>
              <TableRow hover  key={quot.quotationNumber} className={classes.tcell}> 
                    <TableCell><a href="/quotationUpdate" onClick={this.handleClick.bind(this,quot)}>{quot.quotationNumber}</a></TableCell>
                    <TableCell>{quot.date}</TableCell>
                    <TableCell>{quot.quotedTo}</TableCell>
                    <TableCell>{quot.quotedBy}</TableCell>
                    <TableCell>{quot.validTill}</TableCell>
                    <TableCell>{quot.validFrom}</TableCell>
                    <TableCell>{quot.services}</TableCell>
                    <TableCell>{quot.status}</TableCell>
                    <TableCell>{quot.location}</TableCell>
              </TableRow>
              </TableBody>))}
            </Table>
          </div>)
      }
    }

```

Child component code (after clicking on table row this page is rendering):

```
class quotationUpdate extends React.Component {
    render() {
        const {classes}:any=this.props;
        return (
            <div>    
                <h3 style={{color:"black"}}>Update Data</h3>

                    <Card className={classes.cardStyle}>
                    <form style={{ padding: "5%" }}>
                        <Table className={classes.tableStyle} >
                            <TableRow>
                                <h5><TableCell>Quotation No<TextField variant="outlined" /></TableCell>
                                {/* {console.log(quotationNuber)} */}
                                    <TableCell>Valid From <TextField variant="outlined" /></TableCell>
                                    <TableCell>Vaild Till<TextField variant="outlined" /></TableCell></h5>
                            </TableRow>
                            <TableRow>
                                <h5><TableCell>Organization<TextField variant="outlined" /></TableCell>
                                    <TableCell>Useability<TextField select variant="outlined" defaultValue="None" fullWidth helperText="Please Select Value">
                                        <MenuItem value=""><em>None</em></MenuItem>
                                        <MenuItem value={0}>Single</MenuItem>
                                        <MenuItem value={1}>Multiple</MenuItem>
                                    </TextField>
                                    </TableCell>
                                    <TableCell>Version<TextField variant="outlined" /></TableCell></h5>
                            </TableRow>
                            <TableRow>
                                <h5><TableCell>FastTrack<TextField multiline variant="outlined" /></TableCell>
                                    <TableCell>Party Role <TextField select disabled defaultValue="Customer" fullWidth variant="outlined" /></TableCell>
                                    <TableCell>Cargo Status<TextField variant="outlined" /></TableCell></h5>
                            </TableRow>
                        </Table><br /><br />

```