React Method References Between Components

This article is 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!

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

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

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

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

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;

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

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:

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.

Happy Coding!!!

Bello OsagieFollow

Hi, I am Bello Osagie, a tech blogger, writer, and web developer. I teach web development for free… Join me to learn, discover, and have fun coding together!

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. Open an online store and take your business anywhere in the world.

Sign up today to get started

Support what I do and push me to keep making free content.