I have been watching react tutorial for beginners by mosh hamedani 2018.
So far I understand how to create components, render component, and render method dynamically with react.
But the issue is that I'm finding it hard to understand handling event in react. I know how to use the constructor and super function to handle event and change the state object of a component.
I know how to use the bind method to handle event and change the state object of a component. I know how to use the arrow function to change the state object of a component which is the easiest most developers use.
But the thing is that I want to know
the reason why event handler on react can't update the state of a components without using :
1.constructor and super method
2. Bind(this) method
3. Arrow function method.

Changing states in react is done with calling the this.setState() method in a component class. Read more herehttps://www.w3schools.com/react/react_state.asp

The way react works is entirely different from jQuery and vanilla JavaScripts when it comes to working with forms. It works using controlled components. In that you set your input value first to state, that make it "controlled" in the constructor using setState and it is from the state you use pick the form value. You don't work with the values from DOM directly . It is just a reactjs way. The older ways with jQuery or vanilla is great but this is react world

2. The bind has to do with the value of "this" a Javascript keyword that causes a lot of issues with unexpected behavior. To avoid this,

A. you "bind" the method or function declared in the constructor function.
B. Or you use the arrow function, that comes with a lexical "this". Hence no need to bind the method or function in the constructor

E.g functionName = () => {
{/Write something here/}
}

3. Use don't need to call constructor or super if you don't need state in the component.

4 there is another way of declaring state without using constructor and super. That's the style you will see in most code base but it works thanks to babel, JavaScript transpiler.

Call me on 081__854__31__319 for anything react.


Wait,
Make sure you have worked on vanilla JavaScript and you know ES2015 with projects before jumping to reactjs

And also reactjs has one of the best documentation, please make it your friend.

Warripikin08:
I have been watching react tutorial for beginners by mosh hamedani 2018.
So far I understand how to create components, render component, and render method dynamically with react.
But the issue is that I'm finding it hard to understand handling event in react. I know how to use the constructor and super function to handle event and change the state object of a component.
I know how to use the bind method to handle event and change the state object of a component. I know how to use the arrow function to change the state object of a component which is the easiest most developers use.
But the thing is that I want to know
the reason why event handler on react can't update the state of a components without using :
1.constructor and super method
2. Bind(this) method
3. Arrow function method.

Its like I did not ask my question very well


class counter extend component{
state ={
count:0,
};

incrementCount(){
console.log("increment count clicked", this.state.count) OR
Console.log("increment count clicked", this)
}
render(){
return{
<div>
<button onClick={this.incrementCount}>Increment<\button>
<\div>
}
};
}
export default counter;
You know when you want to handle an event like this without using arrow function or bind(this) or constructor in react. In the console of your browser it will read cannot read state property of undefined OR this is undefined. I want to know the reason behind this. Thanks for your contributions guys. expecting your prompt reply.

Search hameedah YouTube video on the "this" keyword

Warripikin08:
Its like I did not ask my question very well


class counter extend component{
state ={
count:0,
};

incrementCount(){
console.log("increment count clicked", this.state.count) OR
Console.log("increment count clicked", this)
}
render(){
return{
<div>
<button onClick={this.incrementCount}>Increment<\button>
<\div>
}
};
}
export default counter;
You know when you want to handle an event like this without using arrow function or bind(this) or constructor in react. In the console of your browser it will read cannot read state property of undefined OR this is undefined. I want to know the reason behind this. Thanks for your contributions guys. expecting your prompt reply.

Pls I need a tutor on React and python languages in Abuja.
Whatsapp only 0803 492 9924

First things first, I think you need to keep things simple beacuse you're mixing up a lot of things.

1. You should stick to arrow arrow functions, once you do this you won't need to bind (using this). Most modern codebases do this, moreover we should all be ES6 complainant.

2. Once you initialise state like this...

state = {} you don't need a constructor. You only need a constructor once you do this.state={}

3. To understand how events work please Google "Reactjs form tutorial" a good number of insightful tutorials will come up.

Sincerely, there hundreds of explanations on this on the web if you'll just browse through. This is not a good platform for such discussions as this blog UI is outdated. You can't even do a reasonable markdown.

Warripikin08:
Its like I did not ask my question very well


class counter extend component{
state ={
count:0,
};

incrementCount(){
console.log("increment count clicked", this.state.count) OR
Console.log("increment count clicked", this)
}
render(){
return{
<div>
<button onClick={this.incrementCount}>Increment<\button>
<\div>
}
};
}
export default counter;
You know when you want to handle an event like this without using arrow function or bind(this) or constructor in react. In the console of your browser it will read cannot read state property of undefined OR this is undefined. I want to know the reason behind this. Thanks for your contributions guys. expecting your prompt reply.

You did not increment the count variable.

incrementCount(){
this.state.count++;
console.log("increment count clicked", this.state.count)
}

Warripikin08:
I have been watching react tutorial for beginners by mosh hamedani 2018.
So far I understand how to create components, render component, and render method dynamically with react.
But the issue is that I'm finding it hard to understand handling event in react. I know how to use the constructor and super function to handle event and change the state object of a component.
I know how to use the bind method to handle event and change the state object of a component. I know how to use the arrow function to change the state object of a component which is the easiest most developers use.
But the thing is that I want to know
the reason why event handler on react can't update the state of a components without using :
1.constructor and super method
2. Bind(this) method
3. Arrow function method.

Truly there are no difference in the outcome , the only difference is that Bind function takes an object as the context, so whatever you pass, will be referenced as 'this' in the code, the arrow is just syntatic sugar that ES6 supports, if you look at how TypeScript transpiles the arrow method, it takes the current class as a copy _this so it can be referenced in the generated code. it is highly important you understand how context in JavaScript works because there are advanced scenario where you might need to bind to an object. An example i have come cross is in Angular Autocomplete displayWith method. All the best

Warripikin08:
Its like I did not ask my question very well


class counter extend component{
state ={
count:0,
};

incrementCount(){
console.log("increment count clicked", this.state.count) OR
Console.log("increment count clicked", this)
}
render(){
return{
<div>
<button onClick={this.incrementCount}>Increment<\button>
<\div>
}
};
}
export default counter;
You know when you want to handle an event like this without using arrow function or bind(this) or constructor in react. In the console of your browser it will read cannot read state property of undefined OR this is undefined. I want to know the reason behind this. Thanks for your contributions guys. expecting your prompt reply.

You are confused because you need to learn javascript a little more before diving into react. I recommend reading You don't know JS by Kyle Simpson. There are 6 books in the series. For your immediate needs, you can read You don't know js - this and object prototypes.

In response to your question, 'this' refers to the object at run time when your code is being compiled.There are ways to specify this for a function.Common ways include through using 'call'and 'bind'. Bind has the highest precedence though. A function on its own does not have its own this binding, so when your code is running, and the line with the this binding is being executed, the compiler will check for this in your function and will not see it because no this has been bound, so it will go to the global scope to use the this of the global scope, which is the global object, which in other words is your browser object also known as the window object. This window object does not have this your function as a method, so it will let you know it is undefined. To test this fact, Open a new javascript file and name it. Then paste this code and run it.
window.speak = function(){
alert('hello')
}
function load(){
this.speak()
}

window.onload = load


link this javascript file to a script tag on your html file and run your code. You will see that 'hello'will be printed even though load has not been bound with this. The function load simply got its this from the global window object.

There is an exception to the 'this' object with respect to a function though. There is lexical this when using a fat arrow function. In this type of function, 'this' is bound to the immediate object the function is in.That is the object in its scope. The this object of this function is not determined at run time unlike the normal function. It is determined at declaration time,that is why it is called lexical this.

afuye:
Search hameedah YouTube video on the "this" keyword

OK bro I will check that out thanks for your recommendation

4dor:
First things first, I think you need to keep things simple beacuse you're mixing up a lot of things.

1. You should stick to arrow arrow functions, once you do this you won't need to bind (using this). Most modern codebases do this, moreover we should all be ES6 complainant.

2. Once you initialise state like this...

state = {} you don't need a constructor. You only need a constructor once you do this.state={}

3. To understand how events work please Google "Reactjs form tutorial" a good number of insightful tutorials will come up.

I will do that bro. Thanks a lot.