ReactJS Tutorial

Understanding How State work in ReactJS

Table of Contents

  • What is State in ReactJS?
  • How to Create a State Object?
  • Test your knowledge with a quick quiz!
  • React Props Vs State Comparison
  • Test your knowledge with a quick quiz!

What is State in ReactJS?

A plain JavaScript object used by React to represent information about the component’s current situation is called the state in ReactJS.

It is just like any other function in a component. The only difference being that a normal variable disappears as the function exits, but React preserves the state variables.

 

How to Create a State Object?

 

class Car extends React.Component {

  constructor(props) {

    super(props);

    this.state = {brand: "Ford"};

  }

  render() {

    return (

<h1>My Car</h1>

     );

  }

}

Test your knowledge with a quick quiz!

Which of the following are mutable by the components?

Select the correct answer

React Props Vs State Comparison

This tabular representation further makes it easy for you to understand the difference between State and Props.

Test your knowledge with a quick quiz!

Which of the following are not accessible by the child components?

Select the correct answer

Did you find this article helpful?