Passing data child to parent functional components in reactjs

Question

How do you pass data from child functional component to a parent functional component in react. I want the vehicle.drive data which is being passed from the parent component to the child component. But the child component gets the specific data entry that I want passed up to the parent. I made a comment in the child comp showing where i want the data to be lifted back up.

Parent Component:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import FolderOpenIcon from '@material-ui/icons/FolderOpen';
import Vehicle from "./vehicle";

const vehicleData = [
    {
        name: "COMET",
        agency: "Agency 1",
        drive: "https://drive.google.com
    },
    {
        name: "STAR",
        agency: "Agency 2",
        drive: "https://drive.google.com
    }
];
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        justifyContent: 'flex-start',
        overflow: 'hidden',
        backgroundColor: theme.palette.background.paper,
        marginTop: '1em'
    },
    gridList: {
        flexWrap: 'nowrap',
        // Promote the list into his own layer on Chrome. This cost memory but helps keeping high FPS.
        transform: 'translateZ(0)',
    },
    title: {
        color: theme.palette.primary.light,
    },
    titleBar: {
        background:
            'linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)'
    },
}));

const setDataReceivedFromChild=(index)=>{ 
        console.log(index);
}
const VehicleList = () => {
    const classes = useStyles();
    const drive = React.useState("");
    return (
        <div className={classes.root}>
            <GridList className={classes.gridList} cols={10}>
                {vehicleData.map((vehicle) => (
                    <GridListTile key={FolderOpenIcon} style={{width: '30rem'}}>
                        <Vehicle vehicle={vehicle} receiveDataFromChild={this.setDataReceivedFromChild}/>
                    </GridListTile>
                ))}
            </GridList>
        </div>
    );
}

export default VehicleList;

Child Component:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import FolderOpenIcon from '@material-ui/icons/FolderOpen';

const useStyles = makeStyles((theme) => ({
    root: {
        margin: '0.5em',
        display: 'flex',
        flexWrap: 'wrap',
        '& > *': {
          margin: theme.spacing(1.2),
          width: theme.spacing(15),
          height: theme.spacing(18),
        },
    },
}));
const sendDataToParent=(index)=>{
   this.receiveDataFromChild(index);
}
const Vehicle = ({vehicle}) => {
    const classes = useStyles();
    const driveURL = React.useState("");

    return (
        
        <Paper className={classes.root} elevation={3}>
            <Grid container spacing={2}>
                <Grid item>
                    <Typography style={{ fontSize: '20px'}} className={classes.title} color="textSecondary" gutterBottom>
                      {vehicle.name}
                    </Typography>
                    <Typography variant="h5" component="h2">
                      {vehicle.agency}
                    </Typography>
                </Grid>
                <CardActions>
                <Button
                    onClick={()=>{this.sendDataToParent(vehicle.drive)}} //this is where it needs to be passed
                    size="small"
                    color="secondary"
                    startIcon={<FolderOpenIcon />}
                    style={{fontWeight:"bold"}}
                  >
                    Drive
                </Button>
                    <Button
                        color="secondary"
                        size="small"
                        className={classes.button}
                        startIcon={<CallIcon />}
                        style={{fontWeight:"bold"}}
                    >
                        Data Calls
                    </Button>
                    <Button
                        size="small"
                        color="secondary"
                        className={classes.button}
                        startIcon={<DateRangeIcon />}
                        style={{fontWeight:"bold"}}
                    >
                        Pipeline
                    </Button>
                </CardActions>
            </Grid>
        </Paper>
    );
}

export default Vehicle;

import React, {Component, Fragment, useState, useEffect} from 'react';
import { withRouter } from 'react-router-dom'
import Grid from '@material-ui/core/Grid';
import Box from "@material-ui/core/Box";
import CardsContainer from "../components/notifications/cards-container";
import VehicleList from "../components/vehicles/vehicles-list";
import DriveEmbedder from "../components/drive/drive-embedder";

Parent to the Parent Component

class HomePage extends Component {

    constructor(props) {
        super(props);

        this.state = {
            currentUser: {name: 'Surpol', picture: undefined},
            showNewNotification: false,
            driveURL: '',
            
        };
    }

   
    getChildData = (id) => {
        console.log(id);
        this.setState({ //this is obviously wrong to do 
           driveURL: id,
        });

    }

    render() {          
        return (
            <Fragment>
                    <Grid container spacing={1}>
                        <Grid item xl={9} lg={9} md={12}>

                            <Box style={{width: '100%', marginBottom: '1rem'}}>
                                <VehicleList getChildData = {this.getChildData}/> //I want to get the data that was retrieved in the previous parent component here, and then change the this.state.driveURL to equal this
                            </Box>

                            <Box style={{width: '100%', height: '60vh', border: '2px', borderColor: 'black', marginTop: '1rem'}}>
                                <DriveEmbedder url={this.state.driveURL} />
                            </Box>
                        </Grid>
                    </Grid>

            </Fragment>
        );
    }
}

export default (withRouter(HomePage));

Answer 1

Suppose the state drive needs to be present in the Parent and the Child. Then you define it in the parent and create a callback function responsible for changing this state setDrive.

In general, the state must be defined at closest common ancestor between the components that use or change this state and this is called Lifting State Up. In your case, something like this (complete demo):

Parent:

const VehicleList = () => {
  const classes = useStyles();
  const [drive, setDrive] = React.useState(null); // the lifted state

  const sendDataToParent = (index) => { // the callback. Use a better name
    console.log(index);
    setDrive(index);
  };

  return (
    <div className={classes.root}>
      {vehicleData.map((vehicle) => (
        <div
          key={vehicle.name}
          style={{
            width: "20rem",
            border: vehicle.name === drive ? "1px solid red" : null
          }}
        >
          <Vehicle vehicle={vehicle} sendDataToParent={sendDataToParent} />
        </div>
      ))}
    </div>
  );
};

Child:

const Vehicle = ({ vehicle, sendDataToParent }) => {
  const classes = useStyles();
  const [showDriveAction, setShowDriveAction] = React.useState(false);
  const driveURL = React.useState("");

  return (
    <Paper className={classes.root} elevation={3}>
      <Grid container spacing={2}>
        {/* ... */}
        <CardActions>
          <Button
            onClick={() => {
              sendDataToParent(vehicle.name);
            }} //this is where it needs to be passed
            size="small"
            color="secondary"
            startIcon={<FolderOpenIcon />}
            style={{ fontWeight: "bold" }}
          >
          {/* ... */}
        </CardActions>
      </Grid>
    </Paper>
  );
};

Answer 2

Passing data from child to parent in functional components React

const Parent = (props) => {
    let onClickFunction = (arg) => alert(arg);
    return <Child update={onClickFunction} />
}

const Child({ update }) {
    return <button onClick={() => update(1)}> Click </button>;
}

export default Parent;