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.
...
<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.
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.
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.
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.
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.