React tutorial in Hindi #10 Click event and function in ReactJs

in this react js tutorial for beginners series we learn how to make click event and how to call a function on click event in react js. This video is made by anil Sidhu in the Hindi Language.
Playlist for complete React series in Hindi

How to make click event
Call function in the button click
Variable in functional Component
The answer to the last Interview Question
New Interview Question

[mohsin_sheikhani]

The reason why the data is not re-rendered onto the screen is because of functional components being stateless components. Stateless components cannot change their state during the runtime of the app, which means the components cannot be redrawn while the app is in action. If we console.log the data just after clicking the button by putting the {console.log(data)}, we will get the updated value of that data but we cannot see the updated value on the screen because the state is internally changed but the component did not render again due to its stateless nature.

[KaizenAction]

I don't care about length as long as you keep it simple and to the point like you do .

[samikolasa]

All videos are Excellent in every aspect ❤️ great work ✌️

[himankshu]

The scope of the variable 'data' is different for return() method and apple() function. return() is getting the value of data from its parent i.e App() but in the alert(), the data is coming from the scope of apple().

While using useState(), it also works with scope logic.

function App() {
const [data, setData] = useState("Anil");
}

function updateData(){
setData("Sidhu");
}

return(
<div>
<h1>{data}</h1>
<button onClick={updateData}>Change name</button>
</div>
);


In the above code, setData("Sidhu") is actually calling and passing "Sidhu" as an argument. Then it goes beyond the scope of updateData() to App() and the value of data gets updated to Sidhu. Inside return(), data in <h1>{data}</h1> listens to its parent i.e App()

[gauravgupta]

When things are understandable, it doesn't matter what the length of the video is. Liked your videos 👌👌

[YashKumar-lqed]

Sir i call the apple function without bracket but it can't show then when I click on click me

[Hope_for_life]

function thanks(){
return(
<h1>thanks anil for teaching us react.js in a easy manner</h1>
)
}

export default thanks ;

[kodakstudiowebs]

great... aap lambi rakh sakhte ho video ki length....

[fitnesssecrets]

the peter value is not showing further in variable data because the variable data is still following the braces of function app, not function apple. data=peter will work in function apple only but anil sidhu will work only in function App. and function App braces are working until return keyword braces closed. That's y in both functions values are showing different .because both braces are working in their own limits.

[sanketthakre]

can't use the variable outside block; since in javaScript, we have the concept of scoping. A variable declared with let cannot be modified outside the block.

[abhisheiksharma]

If not necesary, video length should not be more than 15 min.
and you are excellent bro.

[pushparajsingh]

Sir, i think, something is wrong in this video. Because did you know local declaration or global declaration. Here is the concept use here. That's why anil shudu not change in this video.

[sudhanshubhattl]

i saw different playlist and one short video too but i prefer learning from javapoint or geeksforgeeks i prefer documentation rather then watching a video but some concepts need visual examples and you have to know sometimes how the code works i saw your playlist which is too the point you disgussed some complex topics which i am going to watch and learn from it i am a 3 year bca student learning mern stack devlopment i am in my finial year and preparing for inteships and this videos helped me clear my doubts and concepts

[owaisekhan]

you really explain nicely, may almighty reward you with best and guide to straigh path.

[AnshuKanoujia]

You explained it in simply awesome way!

[CodewithHassan]

Very Helpful course
Thanks sir!
Love from Pakistan

[sultanashraf]

When the code is compiling in data anil is there but when we are calling the fuction then the data value updated thats why this behaviour we are getting. Also apple data will only avilavle in apple function scope this is also a reason.

[viveknagar]

Sir apki Videos Superb Hoti h aur apki video dekhne ke baad confident aata h

[ashutoshkumar-ulyp]

Line 4:8: 'App' is defined but never used no-unused-vars what this mean sir?

[crazetalks]

not changed the value because wo let data parent function me define hai or changed data child function me define hai thats why neechey waly data me value parent se he araha hai