DEV Community

Cover image for Passing methods through props
Cesare Ferrari
Cesare Ferrari

Posted on • Updated on

Passing methods through props

How to pass a React class component method to children components

To add a method to a class component we simply create an identifier inside the class definition and assign a function to this identifier.
We typically assign an arrow function to the identifier that represents the name of the method.
Here's an example. We add the toggleItem() method to the App class component:

class App extends React.Component {

  toggleItem = itemId => {


But how do we pass this class method down the chain of components?
Say we need to use this method in a child component. We use the props object for this purpose.
In this example we have a GroceryList component that is a child of App.
When we mount GroceryList inside App, we also pass the toggleItem prop to it, that is set to the class method in the parent component referenced with the keyword this:


If we have to pass toggleItem() further down to a child of GroceryList, we can reference the same identifier but in this case we need to reference it via props, because it was passed to GroceryList from App through the props object:

// Inside GroceryList:

{ => {
    return (

We have seen a way for a child component to call a method defined in a parent or grandparent component.

Top comments (0)