ReactJS Tutorial - 15 - Methods as props
ฝัง
- เผยแพร่เมื่อ 6 ก.ย. 2024
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
In this video, we take a look at passing methods as props in React components
![🎤 จับฉลากร้องเพลง x P’ #XXSIVK [EP.1] (2/2) เพื่อนจับได้คำไหน..ต้องร้องคำนั้น เริ่ม! 💓🎶 #MXFRUIT](http://i.ytimg.com/vi/1bJvMJXmeS4/mqdefault.jpg)
Vishwas you are very good teachen. With knowledge, good to communicate and very structured. undoubtedly a channel to follow! Congratulations
Absolutely!
I used to think Mosh was the best, but i think your approach suits me better.
mosh skips a lot of things for paid courses
Mosh is amazing and this man too
Agreed. Mosh is pretty shockingly poor, constantly skipping essential parts rushing to get stuff done rather than teaching. He also has paid content that is out of date and his code is buggy. Mosh was too busy showing off, refactoring (improving) code all the time rather than teaching
Soo true. I wasted a lot of time watching his videos.
@@het314 same ..sed lyf..
The best React Tutorial on the internet very easy to understand Thanks!!!
After going the first few tutorials - i know your first name :) - I wanted to say Vishwas that these are the best best tutorial i have come across - so very well structiured and very well explained - i have a long way to go in this playlist - but wanted to say thank you (million times) for compiling this well structured & well laid out playlist - thanks again!
hey can we follow this playlist in 2024?
@@dikshaa262 still viable in 2024
Tried learning with random videos they don't tell u these minute details, this is the best anyone will ever get.
man, I can't I just can't stress enough how concise and simple ur guide is.
what I spent days struggling and learning, was cleared in a matter of minutes.
you are subscribed !!
Probably THE BEST coding tutorial series I've ever studied.. THANK YOU.
Addicted to this playlist. Best content on React on YT. Complex topics well explained in a very simpler way.
Man, You are The best, Awesome, Amazing. It has been many years I am learning from TH-cam, different courses. but your Teaching Power is awesome, you are explaining in the best way. Thank you so much
following your playlist, these are very easy to understand and helpful too. the way you explain the concept is awesome.
requesting you to create series on react native too.
I can't imagine understanding this complex topic by my own... Thanks man
Great explanation I ever seen for child to parent communication. Thanks Vishwas.
Great work sir, Please add videos related to React & Redux approach. Thanks a lot for your efforts that's something that we really appreciate.
Actually I followed your angular tutorials since angular 2 bt., My boss requirement is react then I decided to learn react on that day... I saw you posted your first react video.... Thanks a lot sir... You helped me a lot... 😍😍😍
function comment() {
return "The best React Tutorial on the internet!" + " " + "Very well explained in detail tutorial!" + " " + "More or less 'React for Dummies' ";
}
comment();
make sure to use template strings
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!
Thank you for these 76 videos, there is enough to get a good grasp of what is react...Thanks man !
!
So well explained such an important theme! Easy to understand! thanks man
2:15 template literal of ES6
6:20 the arrow function is the simplest way to pass parameters from the child component to the parent component
The best tutorial and one of the most useful methods in web development!
Awesome concept clearance of props pass methods and access methods in child component
This is best react video i have ever seen
I like your way to teaching, i understand all the concept you are to explain. Thank you a lot for your efforts.
EVERYTIME I LEARN SOMETHING NEW, I PRESS LIKE!
All tutorials Very Well Explained !!! Thx so much !!!
The 4th approach i.e using arrow functions is the best for binding the events
The previous video covered this and I was just about to ask why he did not use an arrow function for greetParent 🤔
@@MichaelRainabbaRichardson I think it is because he said at the start of the series he wanted us to get used to this and its perks. So maybe he is just teaching us through repetition about binding in the state and stuff.
Amazing tutorial, best i have seen so far
your course is so good... The Odin project brought me here
AMAZING TUTORIALS! YOU SHOULD MAKE MORE VIDEOS.
Best explanation in very simple way
bro you just solved my problem, I was very confused with this but now its clear , thanks a lot bro for your awsome videos
🙌
Best Tutorial. Thank you for making these
Sir great I am waiting your next react js video.. Please add video related react .. As soon as possible
Very useful tutorial. Great explanation . thanks you very much.
At 5.33 in childcomponent props used that is not workingout with me it's results error at the browser can u help me to fix this
Great work! Full free course for beginner in react, like me. Thanks :)
Awesome! I am a huge fun of you now
Best tutorial than udemy courses !
very good at explaining .... you are great
Great work easy to understand
Great work
this is just perfect content on react
Gopinav u are a gem
you saved me, thanks so much
your work really appreciated, thanks a lot
Great information videos, just a request for using functional components instead of child one as it is used more
As a Python developer, I should upgrade myself in React JS or pyspark?
completed video 15. Thanks 🙂
Have u completed this playlist?
excellent tutorial..
Can we use bind in place of arrow function? If so, why ?
import React from 'react'
function ChildComponent (props) {
return (
props.greetHandler()}>Greet Parent
)
}
export default ChildComponent
Great work!
Thank you Sir!
If we would have defined childcomponent as a class component then do we have to bind props.greetHandler too in childcomponent ?
Does this only work when the parent component is a class? Cuz I tried to use a functional component as the parent and it didn't work
Great Sir...
Hi Codevlotion, Can u please tell what theme and font are u using to enable font ligatures. it will be very useful
were you asking for this ES7 React/Redux/GraphQL/React-Native snippets
extension
I have a question, if we have a button and onclick setstate changes the flag var to true and we want to display set of data from state using map, how to achieve this ? I'm able to display using map without the flag condition but with condition , I'm unable to . {this.state.flag ? (
{events.map(event => (event.EventName))
}
): null}
would something like this work ? As its not working. :(
do we still need to bind this keyword on constructor if we are using number 2 way( fat arrow)?
awesome explanation 🙏
For me No comments for your fabulous Vedios
Doubt:just after creating a class component, why are we deleting the export keyword? (it occures in between 0:50-0:55 in video)
Meanwhile the tutorial is very good and easy to understand
He deleted the export keyword because we don't want named export. We want a default export.
Basically, when we want to import 'ParentComponent' in say app.js, you do this:
Default = 'import ParentComponent from './Component/ParentComponent' . Rather than Named = 'import { ParentComponent } from './Component/ParentComponent'
I hope I was able to clear your doubt. 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."
why can I not use parent component method at any other html element except button click event inside child component?
Very Helpful Video
professional thanks a lot
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
The code is giving me Error: "props.clickHandler is not a function" and not displaying the alert dialog box.
see if you bind this function into the constructor
why is line 12 needed in ParentComponent.js? What happens if greetParent was an arrow function, then line 12 would be still needed?
Hi sir. I would like to ask which react snippet did you in the video. Can you let me know when you get a chance? T
You are too good man.
the way of explaining is too good.
8:09 i know the concept of desctructuring !but for this example can you tell me how to desctructure ? i have tried is it correct?
childComponent.js
import react from 'react'
function childComponent(greetHandler)
{
return( greetHandler('child')}>greet parent )
}
I tried doing it without using the constructor and bind keyword. Code is something like this:
class ParentComponent extends Component{
state={
message:'Greetings'}
greetParent(){
alert(`hello ${this.state.message}`);
render(){
return(
Getting an error message: TypeError: Cannot read property 'state' of undefined.
Any idea what am I missing?
Got the solution. Just make the greetParent an arrow function.
Nanbargale Vanakam
Shall we inherit properties from childcomponent to parentcomponent,Sir?
Can you make video on "methods as props using functional component"
Did i get it right? that upon clicking the button in the Child, it doesn't "set another state" in the Parent? It just alerted the parentName out? These are all just passing property from Parent to Child and parameter from Child to Parent? or mali ako? :)
Sir, when I am applying ES6 feature for alert.. It was not getting output.
one correction in ParentComponent :
Use function like below to avoid greetParent function not found error:
greetParent = (childName)=>{
alert(`Hello ${this.state.parentName} greetings from ${childName}`)
}
What are the parent and child components here? Can someone please help me understand this
Thank you Sir..
Hey hi, your videos are very useful to me.
I have doubt in this video.
How to access child component methods from parent component.
Please help me.
Waiting for your valuable reply.
Thanks
I think this your problem can be solved with ref
This is the only way you can transmit data from a child component to a parent component in react?
This doesn't work in non creat-react-app. Getting this is undefined in parent component.
I love you, Vishwaz.
thanks
Hello
someone to guide on how i can install react snippets
i will really appreciate
thank you Vishwas for this great tutorial
Please post the extension used for snippets, and good video
Is it correct passing parameters from child component to parent component. ? I heard that the data should pass from parent to child.
i think it mimics the concept of inheritance from object oriented programming like in c# and java.. so if it is so then cant pass data from child to parent
best ever
Legend!
is it also called as state lifting sir?
legend
How to pass data from child to parent without onClick method?
Why we are using arrow function to pass parameters? Why can't we just use props.greetHandler('child'). I know we can't use this but why?
because by doing this we are calling back the greetHandler function where we were supposed to run the function.if you want to do this you have to write it inside a arrow function as it automatically binds this keyword.
4:20 use method as value of attribute
5:15 pass prop from child component
I still cant figure out how passing in childName will equate to child in the child component
WAIT nvm I got it. beautiful.
from rendering
my UI is showing 2 buttons?
6:06 how to pass a parameter when calling parent method from child component