ReactJS Tutorial - 11 - setState

How do you format the code?

completed 11th Video. Thank you 🙂

Do you need to bind the state if you use no arrow function?

Coming from all other languages of programming could you please explain is prevState a reserved word? you say pass it as a parameter however I do not see where prevState is defined. Thanks!

Sir, you are the best.

what the heeeelll, I had to first try out that rce cheat-code

Thanks to vishwas, ur knowledge help me to do my office project.
Thank You

For the CONSOLE element and STATE (DISPLAY) to be counting synchronously, why don't you just add +1 in the console.log ?

console.log (this.state.count +1)

new comers use, functional componet with useState instead

I feel I chose the right channel for React Tutorial

As a beginner its very confusing🤕😥

can usestate do this?

Great video tutorials!

thank you for this beautiful content

😍😍😍

how to call a callback function in a react function bases components

cool tutorials bro

Your teaching style is fantastic and awesome. My standing ovation for this course.

This series is a true gem! I've been watching it in January 2023, even after 4 years, it still holds up. I commend the effort and dedication you put into making these videos. Keep up the fantastic work!

HI im just now learning react ,i tried this out in my local ,
this.state.count = this.state.count + 1;
console.log(this.state.count);
this.setState({});
i was just trying to understand the concept so i was playing with those code , at finally i ended up with this code that i have pasted up,This code gives me the proper render in page and also in console, in page its incrementing from 0 to 1 and so on , and in console the incrementing values were printing up but not the initial value 0 but 1,2,3,...in console. can anyone of here explain me wt is happening in this bit of code

Hi sir, when I open my App.js file I am getting a different file instead what u r getting. Need assistance please

How to add image in setState on click

my second comment on this video and man is this series awesome!!!!!

Suggestion : teaching the wrong way and then the right way makes things very messy in the viewer's mind.
You should have taught the correct way first, and then optionally taught us why other ways woudn't work.
doing so, the correct way is retained in the mind.

To any newb that does not know what an arrow function is:
- Don't learn React if you don't know what an arrow function is.
- Just don't.

You are a good instructor. A lot of these tutorials give the imporession they are just an experienced programmer showing off. You break down the steps to the level of a beginner React student who doesn't tune into the gobblede goop technical explanations that would make sense to an advanced programmer looking at a single function. Thank you for making this course.

I am pleased

Thankyou Great Course

Your explaination is awesome.Helping me lot to understand react concept.

I hope there is an example of something similar, but the button and the counter could be in different parts of the app like two siblings.

Thanks

Instead of like this we can directly pass props to jsx function--
// import React from "react";

import React, { Component } from 'react'

 class Increment extends Component {

  constructor(props) {
    super(props)
 
    this.state = {
       count:0
    }
  }
 
  incre(count){
    this.setState({
      count:count+1
    })
  }
   decre(count){
    this.setState({
      count:count-1
    })
    console.log(count)
    console.log(this.state.count)
  }


  render() {
    return (
      <div>
        <h3>count : {this.state.count}</h3>
        <button onClick={()=>this.incre(this.state.count)}>Increment</button>
        <button onClick={()=>this.decre(this.state.count)}>Decrement</button>
      </div>
    )
  }
}
export default Increment

In the setState method, when I add the counter like - counter: (this.state.counter += 1), I get no issues as he explained in the video. How comes when I add the counter like - counter: (this.state.counter + 1) I get the count issues?

loved the content and the way you explained with do's and dont's❤❤👏👏👏👏

I have used console.log(this.state.count) but still nothing is displayed on the console.
import React, { Component } from 'react'

class Counter extends Component {

constructor(props) {
super(props)

this.state = {
count : 0

}
}

increment(){
this.state.count = this.state.count + 1
console.log(this.state.count)
}

render() {
return (
<div>
<div>
Count - {this.state.count}
</div>
<button onClick = {() => this}>Increment</button>

</div>
)
}
}

export default Counter

Super! Thanks 😊

man u r a legend!
u r saying the method prototype structure clearly. setState (object, callback). has disadvantage, so we will use setState(function, callback). Wow and you clearly explained console logs wont be in sync, unless kept in callback (which took me a day to find, luckily reached ur utube video).
1. only 1 big 'div tag in render
2. setState({count: this.state.count+1}) - updates value on screen.
this.state = this.state – wont work. – modifying the state directly
3. Calls to setState are asynchrous
ie; but console old value - to make it in sync - use in callback func of setState.
ie; entire usage of that variable in that file must be inside setState method so that it gets updated value…
4. whenever gonna access prev value of a state and gonna update, always pass a "function with prevState" as 1st parameter, instead of an "object" - like an increment
If this method called many times, still value will be increased only once. For this not happen, need to pass previous state as a parameter and in a function. (4th point)

I still didnt get the last example like why the this.state.count + 1 is giving 1 in the browser. Like whats the reason for it not updating the count value. Now when we call this.incrementFive() five times then each call will update the count like 0+1, 1+1, till 5. Or is it different. Please help

why is this.increament() used inside onlick function?
Cant we just write increament() inside onclick ?

While the explanation is very clear I don't see a reason why React has made it so complicated to perform a simple operation. I think it is the frameworks/ libraries job to know how to optimize the code written by the developers while the developers should think on how to deliver the real business value. Just compare what he does with this angular code and see how simple it is. Also no need to keep in mind all these problems with async code and all that.

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
<div>
<div>Count - {{count}}</div>
<button (click)="incrementFive()">Increment</button>
</div>`
})
export class AppComponent {
count = 0;

increment() {
this.count++;
}

incrementFive() {
this.increment();
this.increment();
this.increment();
this.increment();
this.increment();
}
}

Hi guys,
even I was confused about the prevState but since he spoke about passing function as args I tried below and it works:
prevState() { //function to return currentState value
return this.state.count;
}

increment() {
this.setState(prevState => ({ //use abv function to get current value
count: prevState.count + 1}))
console.log(this.state.count)
}

Hope this helps and I'm a beginner too so feel free to correct me if any mistake

I def have to rewatch this one

setState &
prevState function

How does it know what prevState is? is it built in React??

This is the kind of tutorial, I was looking for. Its a great place to learn new languages. Thanks a lot Vishwas!