• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Home
  • About Us
  • Django
  • Laravel
  • Interview Questions
  • Tips

CodingStatus

- Learn Coding to Build Web Applications

  • JavaScript
  • jQuery
  • ReactJS
  • Ajax
  • Node.js
  • PHP
  • SQL

React State with Example

June 12, 2021 By Md Nurullah Leave a Comment

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

Contents

  • State in React Js
    • state without Constructor
    • state with constructor
    • State with Props

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" />

Related Posts:

  • React props with Examples
  • React Lifecycle Methods
  • React Fragments
  • React Components - Function and Class Component

Filed Under: ReactJS

Hey there, Welcome to CodingStatus. My Name is Md Nurullah from Bihar, India. I'm a Software Engineer. I have been working in the Web Technology field for 3 years. Here, I blog about Web Development & Designing. Even I help developers to build the best Web Applications.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Follow us

  • facebook
  • twitter
  • linkedin

Recent Posts

  • SQL Join 3 Tables – Join Query for Three Tables
  • Load Records on Select Box using Ajax, PHP & MySQL
  • Display data based on dropdown selection in PHP & MySQL
  • Edit and Update Dropdown Value in PHP & MySQL
  • Display Data From Database in Select Options using PHP & MYSQL
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2022 CodingStatus - All Rights Reserved