Pass data or events from a parent component to a child component in both functional and class components.

I still remember the day when I gave an interview in one of the reputed MNC in India. In the first round, the interviewer was a lady and she has asked me at least 50 questions from React, HTML, and CSS. I gave most of the answers correct and selected for the next round. In the next round, there was a guy who took my interview. First, he asked me to rate my skill out of 5 in React HTML and CSS. I gave 4 to HTML 4 to CSS and 2 to React😅. And you know what happened next he started asking me the question only from React 😁. Ok coming to the point he asked me a simple basic question of React. How to pass an event from a parent component to the child component without using any external library. And I didn’t know that answer 😞. But now I know 🙃. So here is a clear explanation of how to pass data or events from child component to parent component in different ways.

First Method — Functional child component to Parent functional component

1. Create a child component and put the below code inside that component.

import React from "react";
export default function Child({data, onChildClick}) {
    return (
      <div className="child">
       <button onClick={onChildClick}>{data}</button>
      </div>
    );
  }

here we have created a child function and inside that, we are creating a simple button whose text data and onclick event will be coming from the parent component. we have passed data and onChildClick props as an object argument to the child function.

2. Now we will import the child component to our parent component.

import Child from './Child'

3. Then inside your parent function create another function to run our desire event and pass the child component to return.

import React from "react";
import "./styles.css";
import Child from './Child'
export default function Parent() {
function clickAlert(){
    alert("I am working")
}
  return (
    <div className="App">
     <Child data="Click here" onChildClick={clickAlert} />
    </div>
  );
}

here you can see that we have passed Click here as data and onChildClick event from parent to the child. Now when we click on the button it will run our clickAlert function which will basically alert “I am working”.

Here is the live example

Second Method — Class child component to Parent class component

1. Put below code inside your child component.

import React, {Component} from "react";
import "./styles.css";
export default class Child extends Component{
  render(props){
    return(
      <div>
        <button onClick={this.props.onChildClick}>{this.props.data}</button>
      </div>
    )
  }
}

here we are passing props argument inside our render method which will receive data from our parent component and afterward I have passed the event and data using this.props

2. Now go to your parent component and import child component.

3. Now put the below code inside your parent component

import React, {Component} from "react";
import "./styles.css";
import Child from './Child'
export default class Parent extends Component{
clickAlert(){
    alert('I am working')
  }
  render(){
    return(
      <div>
        <Child data='Click here' onChildClick={this.clickAlert.bind(this)} />
        </div>
    )
  }
}

here we have created a clickAlert function which basically running an alert function. Then we have passed the child component inside our render method. The data “Click here” and onChildClick event will be passed to our child component

Note:you nedd to bind your function in class component that's why I have used this.clickAlert.bind(this)

Now clicking on the button will alert “I am working”

Here is the live code.

Third Method — Functional child component to Parent class component

The steps are the same you just need to take the code of child component of the first method and parent component of the second method from the above. Here I am only posting the live code.

That’s it for today.