THIS.STATE (Components Interacting) class Components in React

M Hassan khan answered on December 25, 2022 Popularity 1/10 Helpfulness 1/10

answer THIS.STATE (Components Interacting) class Components in React

THIS.STATE (Components Interacting) class Components in React

Comment

/*
For a class component to use state you need a small pre defined code that has 
a constructor and super function in it.Now with class properties we can
skip the constructor function and that's how it would look like

class Example extends React.Component{
state={
mood:'decent'
};
 render() {
    return <div></div>;
  }
  }
  
  ***** Alternative way with Constructor function *******
  
*/
-----------------------------------------
class Example extends React.Component {
  constructor(props) {
    
    super(props);
    
    this.state = { mood: 'decent' }; // ---> still inside the constructor method
    
    // A React component’s state is a plain JavaScript object,
    // so it can store any valid value that is storable within a JavaScript object.
    // We used to have a constructor function to set initial state.
    // Now with class properties we can skip that, and write like this.
    // state = {
  			// mood:'decent'
  //}
    
  }
 
  render() {
    return <div></div>;
  }
}

/*
It is important to note that React components always have to call super in 
their constructors to be set up properly.


this.state should be equal to an object, like in the example above. This 
object represents the initial “state” of any component instance. 


Make sure not to separate constructor and render with a comma! Methods should
never be comma-separated, if inside of a class body. This is to 
emphasize the fact that classes and object literals are different.

*/
-----------------------------------------

/*
How to Access a Component's state:

To read a component’s state, use the expression 
this.state.name-of-property:
*/
  
  
class TodayImFeeling extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mood: 'decent' };
  }
 
  render() {
    return (
      <h1>
        I'm feeling {this.state.mood}!
      </h1>
    );
  }
}
-----------------------------------------
 /* 
 
How to  Update state with this.setState??
 
A component can do more than just read its own state. A component
can also change its own state.

A component changes its state by calling the function this.setState().

this.setState() takes two arguments: an object that will update
the component’s state, and a callback. 
You basically never need the callback.

take a look at Example.js. Notice that <Example /> has a state of:
*/
{
  mood:   'great',
  hungry: false
}

// Now, let’s say that <Example /> were to call:

this.setState({ hungry: true });

// After that call, here is what <Example />‘s state would be:

{
  mood:   'great',
  hungry: true
}

/*
The mood part of the state remains unaffected!

this.setState() takes an object, and merges that object
with the component’s current state. If there are properties
in the current state that aren’t part of that object, 
then those properties remain how they were.
*/
-----------------------------------------
/*  
How to call this.setState from Another Function?? 

The most common way to call this.setState() is to call a
custom function that wraps a this.setState() call. 
.toggleMood() is an example:

*/
  
class Mood extends React.Component {
  constructor(props) {
    super(props);
    this.state = { mood: 'good' };
    //  Add the following line to the end of constructor():
    this.toggleMood = this.toggleMood.bind(this);  // weired code
  }

    /*
    whenever you define an event handler that uses this, you
    need to add this.methodName = this.methodName.bind(this)
    to your constructor function.
   
    */
 
 toggleMood() {  // place between constructor and render method
    const newMood = this.state.mood == 'good' ? 'bad' : 'good';
    this.setState({ mood: newMood });
  }

  render() {
    return (
      <div>
        <h1>I'm feeling {this.state.mood}!</h1>
        <button onClick={this.toggleMood}> // event handler
          Click Me
        </button>
      </div>
    );
  }
}

//  this.setState won’t mean what they’re supposed to… 
//  unless you have already bound the correct this to this.toggleMood.
  
----------------------------------------------
// this.setState Automatically Calls render
 
/*
Any time that you call this.setState(), this.setState()
AUTOMATICALLY calls .render() as soon as the state has changed.

Think of this.setState() as actually being two things:
this.setState(), immediately followed by .render().

That is why you can’t call this.setState() from inside 
of the .render() method! this.setState() automatically
calls .render(). If .render() calls this.setState(),
then an infinite loop is created.

*/

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: class components javascript

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

M Hassan khan

0 Answers Avg Quality 2/10

THIS.STATE (Components Interacting) class Components in React

Contents

More Related Answers

THIS.STATE (Components Interacting) class Components in React

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.