How to pass methods to Child components in React

Hello everyone 👋👋👋


This is part two of my previous blog : React Events.
So if you've not read that I'd recommend reading it first.

In this blog, I'm going to discuss how to pass methods to Child components and call them from within the child components.

---

So let's first see how the data flows during this :

• A parent component defines a function
• The function is passed as a prop to a child component
• The child component then invokes the prop
• The parent function is then called, usually changing something
• Then the parent component is re-rendered along with its children

Now let's see how it's done. I'm going to discuss two ways of doing it. The first one has some cons and the second one is a better approach.


1) Passing method as a prop using the arrow function :

Bakery.js

import New from "./New";

class Bakery extends React.Component {
  constructor(props) {
    super(props);
  }

  bake(e) {
    alert(e); // it will execute when child component will invoke it
  }

  render() {
    let e = "Baked!";
    return (
      <div>
        <h1>Bakery!!!</h1>
        <New functionBake={() => this.bake(e)} /> {/* child component is called with a prop passing the function using arrow function */}
      </div>
    );
  }
}

ReactDOM.render(<Bakery />, document.getElementById('root'));

New.js

class New extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>New</h1>
        <button onClick={this.props.functionBake}>Bake!!!</button> {/* event handler calling the function from parent class */}
      </div>
    );
  }
}

export default New;

But the problem with this is the same as we discussed earlier with the case of inline binding or arrow function that we are creating a new function after each render and to fix this we have a better approach.


2) Handling the passed function as a prop with the help of another function :

Bakery.js

import New from "./New";

class Bakery extends React.Component {
  constructor(props) {
    super(props);
    this.bake = this.bake.bind(this);
  }

  bake(e) {
    alert(e); // it will execute when child component will invoke it
  }

  render() {
    let e = "Baked!";
    return (
      <div>
        <h1>Bakery!!!</h1> // dsd
        <New value={e} functionBake={this.bake} /> {/* child component is called with a prop passing the function and a prop passing the value */}
      </div>
    );
  }
}

ReactDOM.render(<Bakery />, document.getElementById('root'));

New.js

class New extends React.Component {
  constructor(props) {
    super(props);
    this.handleBake = this.handleBake.bind(this);
  }

  handleBake(evt) {
    this.props.functionBake(this.props.value); // calling function from parent class and giving argument as a prop
  }

  render() {
    return (
      <div>
        <h1>New</h1>
        <button onClick={this.handleBake}>Bake!!!</button> {/* event handler calling handleBake function */}
      </div>
    );
  }
}

export default New;

In this approach, there is no need to bind inline or using an arrow function, therefore, no new function will be created after each render.

---

Thanks for reading 🙏

Any feedback appreciated 🙂

Say HI 👋👋👋

Happy Coding 💻

Comments

[Asaduzzaman Himel]

I have been facing some issues in functional compoent. For example I have a component which recive children.

return (
    <Portal isOpen={isOpen}>
        {
            isOpen ? (
                <ModalContainer>
                    {children}
                </ModalContainer>

            ) : null
        }
    </Portal>
)

Now I wanna pass a function to this children {children}. Could u tell me how to do this!?

[Alok Kumar]

Can you please ping me in twitter, and then we can look into the problem ???

Here's my handle - @thecoollearner