State in ReactJS with Example

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 {
    constructor(props){
        super(props);
       //State Implementation
       this.state = {MobileName:'Samsung', Price:10000, Color:'black'};
       
    }
    changestates = () => { 
        this.setState({MobileName:'Lenovo', Price:30000, Color:'yellow'});
     }
     
    render() {
        return (
            <div>
                {/* <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>
              

            </div>
        )
    }
}

export default ClassEx2

App.JS

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

    </div>
  )
}

export default App;