State in ReactJS with Example | Angular | ASP.NET Tutorials

For Consultation : +91 9887575540

Stay Connected :

State in ReactJS with Example

The state is an instance of React Component Class can be defined as an object of a set of observable properties that control the behavior of the component. In other words, the State of a component is an object that holds some information that may change over the lifetime of the component.

ClassEx2 Component

import React, { Component } from 'react'

export class ClassEx2 extends Component {
       //State Implementation
       this.state = {MobileName:'Samsung', Price:10000, Color:'black'};
    changestates = () => { 
        this.setState({MobileName:'Lenovo', Price:30000, Color:'yellow'});
    render() {
        return (
                {/* <h2>Class Component is called, Student Name is {this.props.studentname}</h2> */}
                <h2>Mobile Details</h2>
                <h3>Mobile Name: {this.state.MobileName} Price : {this.state.Price} Color: {this.state.Color}</h3>
                <h2>Student Name : {this.props.studentname}</h2>
                <button onClick={this.changestates}>Change Mobile</button>


export default ClassEx2


import logo from './logo.svg';
import './App.css';
import Propex from './components/Propex.js';
import Header from './components/Header'
import Footer from './components/Footer';
import ClassEx2 from './components/ClassEx2';

function App() {
  const myvariable = "Yogesh Sharma";
  const myobject = {empid:101, empname:'yogesh sharma'};
  const style1 = {'background-color':'white', 'color':'black', 'height':'440px', 'text-align':'justify'}

  return (
    <div className="container">
      <div className="row">
        <div className="col-12" style={style1}>
        {/* <Propex name1={myvariable} address="Jaipur" empdetails={myobject} /> */}
    <ClassEx2 studentname="Megha Saxena"/>


export default App;