×
  • React – The Complete Guide (incl. React Router 4 & Redux)

  • 17 – Passing Method References Between Components

    Lesson List

    So let’s say we can to call switchNameHandler that not when clicking button from App.js, but also say when clicking on paragraph in the /person/Person.js in which contains name and age.
    Now for that inside a Person component we could add onClick={}, but we cant call that switchNameHandler method in a different file in a different class.

    Passing Method References Between Components

    Well we can actually pass the refrence to the switchNameHandler as a property to our Person component and this is no fancy hack, this is actually a very common pattern.

    src/App.js
    
    ...
    <Person
    	click={this.switchNameHandler}
    	name={this.state.persons[1].name}
    	age={this.state.persons[1].age}
    />
    ...
    

    So in Person component we will add a new property name click the name is totally up to you. there we will pass a reference to this.switchNameHandler, similarly as we did for button in our previous lesson. the difference is in Person component we are passing as property and now we can use this click property Person.js file.

    src/Person/Person.js
    
    import React from 'react';
    const person = props => {
    	return (
    		<div>
    			<p onClick={props.click}>
    				I am a {props.name} and i am {props.age} year old!{' '}
    			</p>
    			<p> {props.children} </p>
    		</div>
    	);
    };
    export default person;
    

    In Person.js we can simply call props.click because click is the name of the property defined in App.js, And that will execute the switchNameHandler function which we pass as a reference.
    then if we save all the files and check in a browser we can click see on click of a paragraph the data is been changed.

    Note:
    something important to understand an important pattern you can also pass methods as props so that you can call a method which might change the state in another component which don’t have direct access to the state and which should not have direct access to the state.

    So, it is a common pattern san it is important to know that you can pass down click handlers which allows you to change data in the Parent component. In the app component.


    In case if the method i.e. switchNameHandler accepts an argument like we want to pass a value to our function.

    src/App.js
    
      switchNameHandler = (newName) => {
     		this.setState({
     			persons: [{ name: 'Lucy Stifert', age: 23 }, { name: newName, age: 12 }, { name: 'Mike', age: 34 }],
     		});
     	};
    

    so we will receive a newName in our switchNameHandler() function. so where we earlier hardcoded the name at that we can set name = newName.
    Now the question is how de we pass the data?
    there are two ways of doing that.
    1) { this.switchNameHandler.bind(this, 'NewName') } : the first argument this is a list of arguments actually which will be passed into our function. and the second argument will be the new name.
    2) { () => this.switchNameHandler() }: this get return switchNameHandler function i.e a function call that is why we have added parentheses. In earlier lesson as I mention that you should not call this and that was true but here its not getting executed immediately. instade what we pass here is an anonymous function
    which will be execuated on a click and which then returns the result of the function getting executed.

    ES6 Note:
    the arrow function this implicitly adds a return in front of the code i.e. () => return this.switchNameHandler() which comes directly after the arrow if its all written in one line.
    React introduction
    React Component
    Passing Method References Between Components
  • Enable Notifications    Ok No thanks
    We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept