Props are the main tool for communication between reusable components in React. You can use them to create interfaces for components, and easily pass data or functions to components.

It is also thanks to props that we can call function from another component in React. Once you define a function, you can pass it to another function via props, and then call it. Shortly we’ll see exactly how to do that.

Pass function to child component in React

Sometimes function defined in one component needs to be called in another component. For example, if parent component needs to handle the event that occurs in the child component.

Props allow you to pass down a reference to a function. Let’s say we need a form, which is going to have one input field and one button. Event handler is defined in the parent App component, but the event (click on the button) happens in the child Form component.

Let’s see how to pass function via props to call it from child component.

function App() {
  const handleClick = () => alert("Clicked a link!");
  return (
    <div>
      <h1>Main page</h1>
      <p>
        In publishing and graphic design, Lorem ipsum is a placeholder text
        commonly used to demonstrate the visual form of a document or a typeface
        without relying on meaningful content.
      </p>
      <Form handler={handleClick} />
    </div>
  );
}

function Form(props) {
  return (
    <div className="form">
      <input type="text" />
      <button onClick={() => props.handler()}>Submit</button>
    </div>
  );
}

In the App component, we define handleClick, an event handler for click events.

Main App component has a simple structure – a simple header and paragraph text followed by our Form component.

In order to call handleClick function (defined in App) in the Form component, we need to pass it down via props.

<h1>…</h1>
<p>…</p>
<Form handler={handleClick} />

As you can see, syntax is kind of similar to setting attributes in HTML.

In this case, we created a handler prop and set its value to the handleClick function we defined outside the JSX.

Call a function from another component in React

In order to call the function from another component, you need to access it via props object. From previous example, the function was passed down via handler prop.

function Form(props) {
  return (
    <div className="form">
      <input type="text" />
      <button onClick={() => props.handler()}>Submit</button>
    </div>
  );
}

For simpler syntax, you can destructure the props object and reference the function by its name.

function Form({handler}) {
  return (
    <div className="form">
      <input type="text" />
      <button onClick={() => handler()}>Submit</button>
    </div>
  );
}

In this example, we use function to handle the click event. This is only one use case. You can use it inside a lifecycle component, so the function is called every time component renders, or one time when it mounts.

Pass event handlers to child components in React

React components are like building blocks for larger components. The art of creating React apps is nothing but effectively and efficiently mixing and matching components to get the desired result.

As you know, React apps store internal component data in the state. This data represents most recent changes in the component. In other words, its state. Because there are so many components, it’s a good practice to store component data in parent components. This doesn’t have to be the component at the top of the tree, but it should be high. Then you can pass down important data into child components if you need it.

This practice is called having ‘single source of truth’ and it’s an important concept for maintaining data consistency in React.

How child components can use event handlers to update parents’ state

Technically, props can only be passed down. Children can not pass data back up to their parents. However, when a parent component passes down reference to an event handler to its child, something interesting happens.

When child component calls that event handler, it passes input data as parameter to the event handler as defined in the parent component.

Event is handled in the child component, but because the function was created in the parent component, the event actually updates state of the parent component. Which is useful for having a single source of truth.

Importance of props

Reusable components are a foundation for building React apps. Sometimes you need a way for different components to communicate with one another. For example, for one component to pass data into another one to customize its contents, appearance, or whatnot.