30

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));
4
  • You don't. You lift state up and pass a callback to change this state. In rare cases, you use refs. If you have a specific case, please write the code. reactjs.org/docs/lifting-state-up.html Aug 15, 2020 at 23:55
  • @RodrigoAmaral what if they are both stateless components
    – surpol
    Aug 15, 2020 at 23:56
  • 1
    React is one way data flow. You never pass props to the parent. Please, give us a concrete example and we can try to give you the React way to implement this flow. Aug 15, 2020 at 23:59
  • @RodrigoAmaral just posted
    – surpol
    Aug 16, 2020 at 0:03

5 Answers 5

45

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>
  );
};
4
  • 1
    I have one more question, what if I wanted to pass the parent components sendDatatoParent variable up one more component to it's parent component which would be a stateful component. Im doing the same thing as you showed me by passing a function to the child from the parent comp but since I'm calling this.setState inside that function, and that function is called inside render() in the parent comp, i get an infinite loop
    – surpol
    Aug 17, 2020 at 18:02
  • You shouldn't update the state on render. Don't ever do that, just update state in response to a DOM event (onClick, onHover, onScroll, etc) or an effect (useEffect). If you are still in trouble, please post the code (in a new question would be better). Aug 17, 2020 at 18:31
  • I just made another edit to the main question with a "Parent to the Parent component" section of code
    – surpol
    Aug 17, 2020 at 18:42
  • See if this example is good to figure out where a piece of state belongs. Try to adapt this to your case codesandbox.io/s/lucid-fog-gu97g?file=/src/App.js Aug 17, 2020 at 19:52
4

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;

2

Passing function to child component to get an update from it. we should use useCallback() hook to avoid unwanted multiple re-render.

export function Mom() {
  let momCalling = useCallback((res) => console.log(res)); // yes mom
  return <Child update={momCalling} />
}

export function Child(props)  {
  let yesMom = useCallback(() => props.update('yes mom'));
  return <button onClick={yesMom}>Click</button>;
}
1

if you're using typescript...

example where child (a header component) tells the parent (the app) to log the application out ... the header is from a (in house) UI component library so can't do this itself as the component library should be free of any MSAL implementation

PARENT:

const App = () => {
  const { instance } = useMsal();

  //header component (the child) will pass event up the chain to the parent
  const childLogoutFunction = (logUserOut: boolean) => {
    logUserOut ? instance.logout() : '';
  };

  return <Header childLogoutFunction={childLogoutFunction} />;
};

export default App;

CHILD

interface HeaderProps {
    childLogoutFunction: (arg: boolean) => void;
}
  
export const Header = (headerProps: HeaderProps) => {
    
    return (
      <Navbar>
           {/* some other header stuff */}
           {/* .
           . */}

                <Link
                  onClick={() => {
                    //call back to the parent on tell them to log out
                    headerProps.childLogoutFunction(true);
                  }}
                >
                  <span className="link-text">Logout</span>
                </Link>
           
      </Navbar>
    );
  };
  export default Header;
1

My example was slightly different. I had to find a way to pass data in the child to the parent component, without using state in the child component.

So as with the answers above, you can manage state in the parent component. However, what I ended up doing was to pass the setter with an argument, e.g. a bare bones example:

const Parent = () => {
  const [value, setValue] = useState('');

  const handleChange = (arg) => {
    setValue(arg);
  });

  return (
    <Child handleChange={handleChange} />
  );
};

And then in the child component, you can do something like:

const Child = ({ handleChange }) => {
  const handleSentValue = (event, val) => {
    event.preventDefault();  
    handleChange(val);
  });

  return (
    <Button
      onChange={handleSentValue} 
    />
  );
};

Which will then give you access to value in the parent component.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.