React Method References Between Components
Tags: react, components, tutorial, javascript
Published: 2021-01-03 22:22:49

###### *This article is sponsored by [Flutterwave](https://dashboard.flutterwave.com/signup?referrals=RV686851) - Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!*

A component not only changes its state when a function call is executed in the same component but also a component can execute a function call as a reference to a different component.

Already we've seen this in the last article when a component state changed typing in the input field from another component (`onChange` an input field). There the input element was used, the button element will be used instead here (`onClick` a button).

Below is an example of changing or managing a state in the same component:

**Person/Person.js**
```jsx
import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
        </div>
    );
};

export default Person;
```

In the example above, there's no method passed to the button in this component. This means changes are made in the same component. 

The event, `onClick` gets fired once the `button` is clicked in the same component as shown below:

**App.js**
```jsx
import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [state, setState] = useState({
    persons: {
      name: 'Bello',
      language: 'React',
      id: '2sdr3'
    }
  });

  const personNameHandler = () => {
    setState({
      persons: {
        name: 'Andela',
        language: 'React',
        id: '2sdr3'
      }
    })
  };

  return (
    <div>
      <Person
        name={state.persons.name}
        language={state.persons.language}
        id={state.persons.id} />
      <button onClick={personNameHandler}>Change Person State</button>
    </div>
  );
};

export default App;
```

Like earlier said, a component method can be passed to another component as a reference. This means a component can change state on the execution of a function call upon a click, `onClick` in a `button` from another component. 

**Person/Person.js**
```jsx
import React from 'react';

const Person = props => {
    return (
        <div className="App">
            <h3>Name: {props.name}</h3>
            <h3>Skill: {props.language}</h3>
            <h3>ID: {props.id}</h3>
            <button onClick={props.click}>Change Person State</button>
        </div>
    );
};

export default Person;
```
In the example above, a function call is executed upon a click `onClick` in a `button` from another component by referencing the  `personNameHandler` method or functional call as a property, `click` in another component.

See the example below:

**App.js**
```jsx
import React from "react";
import { useState } from "react";
import "./App.css";
import Person from "./Person/Person";

const App = () => {
  const [state, setState] = useState({
    persons: {
      name: "Bello",
      language: "React",
      id: "2sdr3"
    }
  });

  const personNameHandler = () => {
    setState({
      persons: {
        name: "Andela",
        language: "React",
        id: "2sdr3"
      }
    });
  };

  return (
    <div>
      <Person
        name={state.persons.name}
        language={state.persons.language}
        id={state.persons.id}
        click={personNameHandler}
      />
    </div>
  );
};

export default App;
```

{% stackblitz react-qduuuq %}

Let's have a parameter, `myName` in the `personNameHandler` function that returns a new state once the `button` is clicked:

```jsx
import React from 'react';
import { useState } from 'react';
import './App.css';
import Person from './Person/Person';

const App = () => {
  const [state, setState] = useState({
    persons: {
      name: 'Bello',
      language: 'React',
      id: '2sdr3'
    }
  });

  const personNameHandler = myName => {
    setState({
      persons: {
        name: myName,
        language: 'React',
        id: '2sdr3'
      }
    })
  };

  return (
    <div>
      <Person
        name={state.persons.name}
        language={state.persons.language}
        id={state.persons.id}
        click={() => personNameHandler('Andela')} />
    </div>
  );
};

export default App;
```

When the button gets clicked, the argument, `'Andela'` is passed to the function, `personNameHandler(myName)`. That is, the component state changes from `Bello` to `Andela` in the name function, `personNameHandler()`.

In a class-based component, the above code snippet can be re-written as:

```jsx
import React from 'react';
import { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {
  state = {
    persons: {
      name: 'Bello',
      language: 'React',
      id: '2sdr3'
    }
  };

  personNameHandler = myName => {
    this.setState({
      persons: {
        name: myName,
        language: 'React',
        id: '2sdr3'
      }
    })
  };

  render() {
    return (
      <div>
        <Person
          name={this.state.persons.name}
          language={this.state.persons.language}
          id={this.state.persons.id}
          click={() => this.personNameHandler('Andela')} />
      </div>
    );
  };
}

export default App;
```
You can replace `() => this.personNameHandler('Andela')` to `this.personNameHandler.bind(this, 'Andela')` in a class-based component.

{% stackblitz react-kmequ6 %}

**Happy Coding!!!**

<a href="https://www.buymeacoffee.com/bellotech" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>

{% user bello %}
#### Techstack | Flutterwave 
Techstack article, sponsored by Flutterwave. Flutterwave is the easiest way to make and accept payments both online and offline from customers anywhere in the world. It is absolutely free!  Also, you get a Flutterwave dollar barter card when you [signup](https://dashboard.flutterwave.com/signup?referrals=RV686851). Open an online store and take your business anywhere in the world.

{% youtube ClXVUM3Rf7A %}

[Sign up today to get started](https://dashboard.flutterwave.com/signup?referrals=RV686851)

[Support](https://dashboard.flutterwave.com/donate/3lo9klliqwbu) what I do and push me to keep making free content.