REACT PASSING METHODS REFERENCE BETWEEN COMPONENTS

I want to talk about how we can pass functions from one component to another in React application. This is very important thing to know how to make it. Because most of the times you can have state at higher component and a lower component is going to be trigger something to happen in that state. As you see example below i am creating a bunch of objects and its also repeated in the other component.

Example

import React from 'react';
const person = (props ) => {
return (
//click is the name of the property  defined in App.js (line 43)
<div>
<p onClick={props.click}>I'm {props.name} and I am {props.age}!</p>
<p>{props.children}</p>
</div>
)
};
export default person;

Let’s say when we clicking any paragraph here (line 6 & 7) the paragraph which can say it contains name and age inside person component

Now for that Person component, we could add onClick But now what? We can’t call that handler method in different files in different classes.

We can actually references to this switchHandler in App.js switchHandler = () => {line-18} as a property to our component(line-37.39)

This is no fancy Hack This is actually very common pattern //which we did also here onClick button (line36) now we can use this click property(line 43 in our app.js)

I can pass onClick={props.click} line 6 above because click is the name of the property defined in App.js (line 43)

so when we click the switch button on the browser its also changed the name but if we click just the paragraph

which we put click button in App.js line 43 its should also change when we click specific the paragraph

Which we put click button in App.js(line43)

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
state = {
persons: [
{name: "Ali Bener", age: 43 },
{name: "Arslan Eksi", age: 36 },
{name: "Levent Mergen", age: 74 }
],
otherState: ' some other value'
}
switchHandler = (newName) => {
this.setState({
persons : [
{name: newName, age: 49 },
{name: "Ceren Ates", age: 40 },
{name: "Nevriye Yilmaz", age: 40 }
]
})
}
render() {
return (
<div className="App">
<h1> LEGENDS LIST </h1>
<p>This is really working </p>
<button onClick={this.switchHandler.bind(this, 'Maximillian')}> Switch Name</button>
<Person
  name={this.state.persons[0].name}
age={this.state.persons[0].age}/>
<Person
name={this.state.persons[1].name}
age={this.state.persons[1].age}
click={this.switchHandler.bind(this, 'Max!')} >My Hobbies: Volleyball</Person>
<Person
name ={this.state.persons[2].name}
age={this.state.persons[2].age}/>
</div>
);
}
}
export default App;

When we just click the switch button its switch name when we click switch button (line36)

Let’s say When we click the paragraph here (line43) It also switches the name!

I will add new property name click (line43) I will pass a references {this.switchHandler} references click property

which we did also here onClick button (line36) now we can use this click property(line 43 in our Person.js)

and this will execute the function which i pass as a reference(line 43)

You can’t pass methods as a props so that you can call a method which might change the state in another component

Which does not have direct access to the state and which should not have direct access

You can pass down click handlers like (line43) which allows you change data in the parent component in the person component(in person.js)

Maybe we also want to pass a value to our function maybe our switch Handler method has to receive (newName line 18)

So where do I set up newName in (line22) so how do we pass this data ?

There are two ways of doing that ….

*1 you can just bind onClick={this.switchHandler.bind(this)}> (line-36)

this controls what is inside the function will refer and binding it outside of the function -> this.setState({ line19})

We are binding it to class might look strange but it’s typical way to handling this issue in JS

onClick={this.switchHandler.bind(this)}> (line-36) this is list of argument actually which we will pass into our function

And here this should be the pass to our function switchHandler = (newName) => { line-18}

And we should also need a new name as second argument onClick={this.switchHandler.bind(this, ‘Maximillian)}> (line-36)

we also copy bind code and pass the function as a reference on click prop click={this.switchHandler.bind(this, ‘Max!’)} (line 43)

When we click on the paragraph it will give the name Max! IF we click switch button it will give us Maximillian

I can pass onClick={props.click} line 6 above because click is the name of the property defined in App.js (line 43)

so when we click the switch button on the browser its also changed the name but if we click just the paragraph

which we put click button in App.js line 43 its should also change when we click specific the paragraph

Which we put click button in App.js(line43)

Using arrow function onClick

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
state = {
persons: [
{name: "Ali Bener", age: 43 },
{name: "Arslan Eksi", age: 36 },
{name: "Levent Mergen", age: 74 }
],
otherState: ' some other value'
}
switchHandler = (newName) => {
this.setState({
persons : [
{name: newName, age: 49 },
{name: "Ceren Ates", age: 40 },
{name: "Nevriye Yilmaz", age: 40 }
]
})
}
render() {
return (
<div className="App">
<h1> LEGENDS LIST </h1>
<p>This is really working </p>
<button onClick={ () =>  this.switchHandler('Maximillian!!')}> Switch Name</button>
<Person
name={this.state.persons[0].name}
age={this.state.persons[0].age}/>
<Person
name={this.state.persons[1].name}
age={this.state.persons[1].age}
click={this.switchHandler.bind(this, 'Max!')} >My Hobbies: Voleyball</Person>
<Person
name ={this.state.persons[2].name}
age={this.state.persons[2].age}/>
</div>
);
}
}
export default App;

NEW METHOD ARROW FUNCTION onClick

This new syntax looks different here onClick (line36) which takes no argument theoretically it would receive an event object

And simply as a function body returns this function call onClick={ () =>this.switchHandler()}>(line36)

When using an arrow function this implicitly adds a return keyword in the front of the cod

Early lecture i said you should not call function inside curly to not execute immediately which was true onClick={ () => this.switchHandler()} line 36

but here this is not executed immediately instead if we pass here an anonymous function which will be execute on a lick and

Which then returns the result of this function getting executed. which meets with this function execution

line 21–25

persons : [

{name: newName, age: 49 },

{name: “Ceren Ates”, age: 40 },

{name: “Nevriye Yilmaz”, age: 40 }

]

but this method not efficient , REACT can re-render certain things in your app to often so I DON’T RECOMMEND THIS

USE THE BIND METHOD!!