ReactJS Tutorial – 15 – Methods as props
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703444265_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 15 – Methods as props
In the earlier videos we have seen how a parent component can pass down props to its children components in the data in the parent component when passed as props is available in the children components now what if a child component wanted to communicate with the parent component strangely we still use props
But this time we pass in a reference to a method as props to the child component I am going to create a new file called parent component dot Jas within the file I will use the react snippet RC e to create a class component let me remove the named export and in
The component I will add a constructor with the snippet our Const within the constructor we set a state called parent name with the value parent next I am going to define a method greet parent which simply alerts hello followed by the parent name which is set in the state so hello
Concatenated with this dot state dot parent name now this is fine but since we are using es6 I would like to use template literals so instead of the regular concatenation we are going to have tactics which is the key right below your Escape key and within backticks
Hello followed by the dollar sign and curly braces and within the curly braces this dot state dot parent name now please understand backticks and dollar curly braces is a feature in es6 and is not a feature specific to react if you are new to template literals please take
A five-minute pause read about it and resume the video also since we are using this keyword in the method we need to bind this method so in the constructor this dot grid parent is equal to this dot grid parent dot bind this and I’m going to format the code I am going to
Leave the JSX empty for now and get back to it in a minute next I will create another file called child component dot j s within the file I will use the react snippet RFC II to create a functional component we don’t make use of state in
This component and that is the reason I am sticking to the more simpler functional component in the JSX I will add a button that says greet parent now back in the parent component I will include the child component in the render method make sure to import the child component
At the top next an app component I will include the parent component in the render method parent component again make sure to import the component at the top now if I save all the files and take a look at the browser you should be able to see
The button greet parent if I click on the button though nothing happens right now but what I want is when we click on the button in the child component I want to execute the method defined in the parent component basically the child component calls a parent component
Method and as I mentioned already this is achieved using props the only difference this time is we passed the method itself as a prop to the child component so I’m going to go back to vs code and in parent component JSX we add an attribute to the child component let’s
Call the attribute greet handler and to this we assign the greet parent method so this is going to be equal to this dot greet parent again make sure you don’t add the parentheses we are passing a reference to the grid parent method as a prop called greet handler
We can now grab hold of this reference in our child component in the child component on click of this button we simply call props dot greet handler so on click in camel case is going to be equal to curly braces and within the curly braces props dot greet handler
Make sure to add props as a parameter let’s save the files and see if this works I’m going to go back to the browser click on the button and you can see the alert hello parent so we have successfully called a method in the parent component from a
Button in the child component bypassing the method as props to the child component this is something you’re going to do quite often in your projects so please do make a note of it now let’s see how to pass a parameter when calling the parent method from the child
Component and this is where an arrow function in the return statement is really useful arrow function syntax is the simplest way to pass parameters from the child component to the parent component so let me convert the onclick handler into an arrow function parenthesis fat arrow syntax props dot
Greet handler but this time with the parentheses now we can pass in any number of parameters to the greet handle to keep it simple let’s pass one parameter which is the string child next let’s incorporate this parameter in the great parent method it’s back in parent component in great parent method
We are going to receive a parameter child name now in the alert statement we can have hello this dot state dot pennant name from dollar curly-braces child name if you save the files go to the browser and click on the grid pattern button you should see the alert
Hello parent from child we have successfully passed a parameter from the child to the parent so this is pretty much how you pass methods as props in react components in the parent component define the method on the child component tag past the method as a prop in the
Child component access the method using the props object if at all you have to pass a parameter use the arrow functions in tags by the way you can D structure the props object in this functional component but since we have just this one prop I’m going to leave it as it is
Now if you are keen on event handling with form data we will talk about that later on in the series when we deal with form handling but for now this is pretty much it about event handling in react thank you guys for watching don’t hurt my eyes in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
thanks
Should It not be "this.props.greetHandler()" in ChildComponent.js as it is a class components ?
Or is it only if we use constructor(props) ?
completed video 15. Thanks 🙂
@Codeevolution its showing me an error for the above example, can you tell me where have you defined in ChildClass the function property 'Child' to ParentClass childName. The childName is declared but its value is never assigned.
The error while executing the code is "Hello Parent from undefined."
Great information videos, just a request for using functional components instead of child one as it is used more
this is just perfect content on react
Can you make video on "methods as props using functional component"
What are the parent and child components here? Can someone please help me understand this
Gopinav u are a gem <3
I don't understand t6he problem, please help
alert('Hello ${this.state.parentName}') this statement displaying message Hello ${this.state.parentName}, please help
please help
The greet parent button is not visible, I have written ParentComponent and childComponent properly and included the parentComponent in app.js, but still it is not visible
Thank you Sir!
Sale kuch samajh nehi aya kutte
worst video of the playlist
Samjh hi nhi aaya
bro is this still applicable ?
bro you just solved my problem, I was very confused with this but now its clear , thanks a lot bro for your awsome videos
🙌
this tutorial was not clearly explained.
The best tutorial and one of the most useful methods in web development!
do we still need to bind this keyword on constructor if we are using number 2 way( fat arrow)?
my UI is showing 2 buttons?
import React, { Component } from 'react'
import ChildComponent from './ChildComponent'
class ParentComponent extends Component {
constructor(props) {
super(props)
this.state = {
parentName:'Parent'
}
this.greetParent = this.greetParent.bind (this)
}
greetParent()
{
alert (`Hello ${this.state.parentName}`)
}
render() {
return (
<div>
<ChildComponent greetHandler = {this.greetParent}/>
</div>
)
}
}
export default ParentComponent
import React from 'react'
function ChildComponent (props) {
return (
<div>
<button onClick ={()=> props.greetHandler()}>Greet Parent</button>
</div>
)
}
export default ChildComponent
Vishwas, you have some of the best React lessons that I can find! Your lessons were very well organised with clear explanations and great examples!