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.

Related Posts

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

react js icon

What is Redux? What is action, reducer and store in Redux

In this blog we will discus about the redux, what is Redux and how you can use it in React application. What is Redux? Redux is a…

react js icon

What is useEffect Hook? How to Fetch data from API using useEffect

useEffect hook is used to manage side effects that are not related to component rendering. Mostly useEffect hook is used for managing console logs, animations, loading data,…

react js icon

What is useReducer Hook? What is the difference between useState and useReducer Hooks?

useReudcer hook takes the current state and returns a new state, it is used for state management. With useReducer, we can directly call the function inside the…

react js icon

Creating React JS App without using npx create-react-app command

It’s easy to create a react application by just running npx create-react-app project_name command, do you know what are the basic requirements for creating a react application…

react js icon

What is the useState() hooks in React JS | How to use useState() hook in React JS

Hooks are very important in react js and the most common hook is the useState Hook. In this blog, we will look into the functionality of this…

Leave a Reply

Your email address will not be published. Required fields are marked *