How to pass methods to Child components in React
Tags: react, javascript, webdev, 100daysofcode
Published: 2020-07-08 09:19:53

Hello everyone 👋👋👋
<br />
This is part two of my previous blog : [React Events](https://dev.to/thecoollearner/react-events-iam).
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

<br />
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.
<br />
1) Passing method as a prop using the arrow function :

**Bakery.js**
```react
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'));
```
<br/>
**New.js**
```react
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;
```
<br />
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.
<br />
2) Handling the passed function as a prop with the help of another function :

**Bakery.js**
```react
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'));
```
<br/>
**New.js**
```react
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;
```
<br/>
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 👋👋👋] (https://twitter.com/thecoollearner)

Happy Coding 💻