CODEWITHSUNDEEP
reactjsstate
Taimoor Hussain Musa
Taimoor Hussain Musa

Reputation: 63

Why state is null in the first render - Reactjs

In the first render state is null and I need to put a condition. Is this how reactjs work or I am doing sth wrong?

Code link: https://jsfiddle.net/taimoor7/6o31k2ay/4/

class Toggle extends React.Component {
  Constructor(props){
    Super(props);
    this.state = { isToggleOn: false }
  }
  render() {
    console.log("this.state", this.state)
    return (
      <div>
        <h1>Hello Reactjs</h1>
        <button>
          {this.state.isToggleOn? 'ON': 'OFF'}
        </button>
      </div>
    );
  }
}

const element = (<Toggle />);
const rootEle = document.getElementById("root");

ReactDOM.render(element, rootEle);

Upvotes: 0

Views: 342

Answers (2)

Abhay Kumar
Abhay Kumar

Reputation: 550

You have typo in your constructor:

Constructor(props){
    Super(props);
    this.state = { isToggleOn: false }
  }
  1. Change Constructor to constructor the SMALL c.
  2. Change Super to super, the SMALL s.

Use code below:

constructor(props){
    super(props);
    this.state = { isToggleOn: false }
  }

Upvotes: 0

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Use this way

constructor(props){
    super(props);
    this.state = { isToggleOn: false }
  }

Upvotes: 1

Related Questions