How can you transfer data from a child component to a parent component in react?

Q: How can you transfer data from a child component to a parent component in react?

class ParentComponent extends React.Component { constructor(props) { super(props); this.state = { data: null }; this.handleData = this.handleData.bind(this); } handleData(data) { this.setState({ data: data }); } render() { return ; } } class ChildComponent extends React.Component { sendData = () => { this.props.handleData("Data from child"); }; render() { return Send Data ; } }

Difficulty: 5/10

state lifting, callback props, context

We can pass data from child to parent using a callback function passed as a prop from parent to children, this callback will be called to update parent with the data in child component.

Create a callback function in the parent component: This function will be used to update the state of the parent component. In this example, when the button in ChildComponent is clicked, the sendData method is called, which in turn calls the handleData method of ParentComponent (passed down as a prop), updating the state of ParentComponent with the data from ChildComponent

Pass the callback function to the child component as a prop: The child component can then call this function and pass data to it

Scenario Questions

0-2 years experience

2-5 years experience

1We have a form split across several child components, and the Parent must collect all field values to submit. The current design uses callbacks passed down, but the form sometimes loses data after a child re‑renders. What could be causing this and how would you fix it?

Follow-up Questions