Passing Events from parent to child component in React JS

In this blog post we have two components App component and Button component, you can create components with any name you want.

For this example we are creating a button component where we will add a button and when user click on this button the alert will pop up with some text from App component.

This alert text we are passing from button component, So with this blog post you will understand how you can pass data from child to parent component with events.

App Component :

import './App.css';
import Button from './Button';
function App() {
  const clickEventFunction =(alertText)=>{
    alert(alertText);
  }
  return (
    <div className="container mx-auto mt-3 font-thin">
      <h1 className="text-5xl">Child to Parent Communication</h1>
      <Button clickEvent={clickEventFunction} />
    </div>
  );
}
export default App;

Button Component :

const Button = (props) =>{
    let alertText = "button clicked from child component";
    const clickOnButton =()=>{
        props.clickEvent(alertText);
    }
    return (
            <button onClick={clickOnButton} 
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-10" >
            Click Here
            </button>
    )
}
export default Button;

We are using tailwind CSS classes for designing purpose, to learn how you can add tailwind CSS inside your react project check our blog post How to add Tailwind css in React JS application ?

So now let’s understand whats happening inside these files.

Inside App component we are importing Button component and adding a property clickEvent which is connected to clickEventFunction.

This clickEventFunction showing alert box with some data and this data is coming from the Button component.

This data is just a string in this case i.e. “button clicked from child component”

This clickEventFunction triggered when button clicked inside the Button component.

Inside Button component we are adding a button on JSX and onClick javascript function triggering an event clickOnButton which is passing alertText data to App Component.

With props we can call App components functions and we can pass values.

let alertText = "button clicked from child component";
    const clickOnButton =()=>{
        props.clickEvent(alertText);
    }

This clickEvent is a property which is coming through the props object and by using props.clickEvent and passing alertText to it we can receive this data in App Component inside the clickEventFunction.

Inside clickEventFunction we are receiving this alertText data and passing to alert.

 const clickEventFunction =(alertText)=>{
    alert(alertText);
  }

Here you can name this alertText anything it just the variable which is receiving the value from the Button component.

Output for this program is show below, here we are clicking on button which is from Button Component and Data is showing on App Component.

Also the button is imported inside the App Component so it is displaying in UI.

If you have any question feel free to ask.