React State with Example

If you create a web application using react js, then you may need to store property values in an object and render them in a class component. So, you can easily do it using react state.

In this tutorial, you will see different types of examples to implement state with or without constructor even bypassing props object as a parameter.

Also, you will learn more important concept of state object while you are reading the given points. So, you should not miss any single point that will be useful for your project.

What’s Before –

Before getting started, you should know the following topics. It you have already known , then you can skip the.

React Render Method

React Components

React Fragments with Example

React Props with Example

State in React Js

The React state is a pre-defined object that must be define in a class component.

Important Point –

• The state can be defined with or without a constructor.
• We can also access props as a value of the state.
• the state can contain any property value like variable, array, object & method
• you can’t define any other name instead of state.
• You can declare many properties as you need

state without Constructor

You can define state without a constructor or direct inside a class component

Syntax –

creating a state object

class ComponentName extends React.Component {
  state = {
    property_1: value_1,
    property_2: value_2,
    property_3: value_3,
    property_n: value_n
  };
}

Accessing property value of state anywhere in class component like this.state.propertyName

this.state.property_1
this.state.property_2
this.state.property_3
this.state.property_n

Example –

class Student extends React.Component {
 state = {
  fullName: "Noor Khan",
  profession: "Engineer",
  city: "Bihar"
 };
 render(){
   return <p> My Name is {this.state.fullName} from {this.state.city} and I am an {this.state.city}</p>
 };
}

state with constructor

You can also define state with a constructor in a class component. but you will have to implement the following points –

• constructor () method must be defined with props argument
• built-in method super(props) must be called before the state
• the state must be defined using this keyword like this.state
• You should define a state with a constructor because it is the only method that is called first.

Syntax –

class ComponentName extends React.Component{
 constructor(props){
   super(props);
   this.state = {
    property_1: value_1,
    property_2: value_2,
    property_3: value_3.
    property_n: value_n
   };
 }
}

You can access property values of state anywhere in class component using this.state.propertyName

this.state.property_1
this.state.property_2
this.state.property_3
this.state.property_n

Example –

class Course extends React.Component {
 constructor(props){
  super(props);
  this.state = {
    id:101,
    courseName: " UI Development",
    language: " React js",
    fees : 50
 };
 }
 render(){
 return(
   <div>
     <p>id:{this.state.id}</p>
     <p>Course Name: {this.state.courseName}</p>
     <p>Language: {this.state.language}</p>
     <p>Fees :{ this.state.fees}</p>
   </div>
 );
}
}

State with Props

If you need to pass arguments to the class compoment and access them in place of property value of state, then you can define state with props.

For your better understanding, see this example –

Example –

class Course extends React.Component {
 constructor(props){
  super(props);
  this.state = {
    id: this.props.courseId,
    courseName: "Web Development",
    language: this.props.courseLanguage
    fees : 50
 };
 }
 render(){
 return(
   <div>
     <p>id:{this.state.id}</p>
     <p>Course Name: {this.state.courseName}</p>
     <p>Language: {this.state.language}</p>
     <p>Fees :{ this.state.fees}</p>
   </div>
 );
}
}

Pass props to the class component

<Course courseId="101" courseLanguage="React Js" />