title: Passing data child to parent functional components in reactjs
body: <p>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.</p>
  <p>Parent Component:</p>
  <pre><code>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 &quot;./vehicle&quot;;
  
  const vehicleData = [
      {
          name: &quot;COMET&quot;,
          agency: &quot;Agency 1&quot;,
          drive: &quot;https://drive.google.com
      },
      {
          name: &quot;STAR&quot;,
          agency: &quot;Agency 2&quot;,
          drive: &quot;https://drive.google.com
      }
  ];
  const useStyles = makeStyles((theme) =&gt; ({
      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)=&gt;{ 
          console.log(index);
  }
  const VehicleList = () =&gt; {
      const classes = useStyles();
      const drive = React.useState(&quot;&quot;);
      return (
          &lt;div className={classes.root}&gt;
              &lt;GridList className={classes.gridList} cols={10}&gt;
                  {vehicleData.map((vehicle) =&gt; (
                      &lt;GridListTile key={FolderOpenIcon} style={{width: '30rem'}}&gt;
                          &lt;Vehicle vehicle={vehicle} receiveDataFromChild={this.setDataReceivedFromChild}/&gt;
                      &lt;/GridListTile&gt;
                  ))}
              &lt;/GridList&gt;
          &lt;/div&gt;
      );
  }
  
  export default VehicleList;
  </code></pre>
  <p>Child Component:</p>
  <pre><code>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) =&gt; ({
      root: {
          margin: '0.5em',
          display: 'flex',
          flexWrap: 'wrap',
          '&amp; &gt; *': {
            margin: theme.spacing(1.2),
            width: theme.spacing(15),
            height: theme.spacing(18),
          },
      },
  }));
  const sendDataToParent=(index)=&gt;{
     this.receiveDataFromChild(index);
  }
  const Vehicle = ({vehicle}) =&gt; {
      const classes = useStyles();
      const driveURL = React.useState(&quot;&quot;);
  
      return (
          
          &lt;Paper className={classes.root} elevation={3}&gt;
              &lt;Grid container spacing={2}&gt;
                  &lt;Grid item&gt;
                      &lt;Typography style={{ fontSize: '20px'}} className={classes.title} color=&quot;textSecondary&quot; gutterBottom&gt;
                        {vehicle.name}
                      &lt;/Typography&gt;
                      &lt;Typography variant=&quot;h5&quot; component=&quot;h2&quot;&gt;
                        {vehicle.agency}
                      &lt;/Typography&gt;
                  &lt;/Grid&gt;
                  &lt;CardActions&gt;
                  &lt;Button
                      onClick={()=&gt;{this.sendDataToParent(vehicle.drive)}} //this is where it needs to be passed
                      size=&quot;small&quot;
                      color=&quot;secondary&quot;
                      startIcon={&lt;FolderOpenIcon /&gt;}
                      style={{fontWeight:&quot;bold&quot;}}
                    &gt;
                      Drive
                  &lt;/Button&gt;
                      &lt;Button
                          color=&quot;secondary&quot;
                          size=&quot;small&quot;
                          className={classes.button}
                          startIcon={&lt;CallIcon /&gt;}
                          style={{fontWeight:&quot;bold&quot;}}
                      &gt;
                          Data Calls
                      &lt;/Button&gt;
                      &lt;Button
                          size=&quot;small&quot;
                          color=&quot;secondary&quot;
                          className={classes.button}
                          startIcon={&lt;DateRangeIcon /&gt;}
                          style={{fontWeight:&quot;bold&quot;}}
                      &gt;
                          Pipeline
                      &lt;/Button&gt;
                  &lt;/CardActions&gt;
              &lt;/Grid&gt;
          &lt;/Paper&gt;
      );
  }
  
  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 &quot;@material-ui/core/Box&quot;;
  import CardsContainer from &quot;../components/notifications/cards-container&quot;;
  import VehicleList from &quot;../components/vehicles/vehicles-list&quot;;
  import DriveEmbedder from &quot;../components/drive/drive-embedder&quot;;
  </code></pre>
  <p>Parent to the Parent Component</p>
  <pre><code>class HomePage extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              currentUser: {name: 'Surpol', picture: undefined},
              showNewNotification: false,
              driveURL: '',
              
          };
      }
  
     
      getChildData = (id) =&gt; {
          console.log(id);
          this.setState({ //this is obviously wrong to do 
             driveURL: id,
          });
  
      }
  
      render() {          
          return (
              &lt;Fragment&gt;
                      &lt;Grid container spacing={1}&gt;
                          &lt;Grid item xl={9} lg={9} md={12}&gt;
  
                              &lt;Box style={{width: '100%', marginBottom: '1rem'}}&gt;
                                  &lt;VehicleList getChildData = {this.getChildData}/&gt; //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
                              &lt;/Box&gt;
  
                              &lt;Box style={{width: '100%', height: '60vh', border: '2px', borderColor: 'black', marginTop: '1rem'}}&gt;
                                  &lt;DriveEmbedder url={this.state.driveURL} /&gt;
                              &lt;/Box&gt;
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
  
              &lt;/Fragment&gt;
          );
      }
  }
  
  export default (withRouter(HomePage));
  </code></pre>