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.

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.

React introduction
React Component