React Method References Between Components

React Method References Between Components

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article
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[0].name}
        language={state.persons[0].language}
        id={state.persons[0].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!!!


Buy me a Coffee


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.

 
Share this

Impressum

TechStack Media was launched in the year 2020 to make the learning of web technologies easier and more fun.

My name is Bello Osagie, I am the founder of TechStack, and my focus is to give in-depth, senior-level knowledge of the course through a step-by-step approach. You will learn HTML, CSS, JavaScript etc.

You can find my posts on Dev.to, Medium, Hashnode, Hackernoon, and Blogspot

The approach is to first start with the basics, then advance to more topics. Lots of practical examples are added to make learning more easier. TechStack Media also includes videos apart from content writing to make sure you understand all the concepts in a particular topic or course. Contents are frequently updated, so you do not miss out on the latest technology.

If you need a contact me on any of my social media or email:

For exclusive web technology tutorials, join my patron page.

Proudly part of