State in React JS, What is state, how to change value of State on React

 

It is an in-built attribute of react component that is used to change the values of property, when we want to change property value using the getter and setter method then we can use state.

Whenever the state will be changed then the component will be re-render.

Now I am explaining the React State Example and Syntax pattern using code.

Class Componentame extends React.Component

{

     constructor()

{  

this.state= {'key':value}

}

}

Example of React State with multiple values 

Example1:-

import React from "react";

export class Car extends React.Component {

    constructor(props)

    {

        super(props);

        this.state = 

          {

            'carid':1002,

            'carname':'Ford Figo',

            'carprice':500000,

            'carnumber':'MP09 1212' 

          }

        console.log("constructor block");

    }

    

    render() {

      return( <div> 

      <p> Car Company is {this.props.A} </p>  

      <p> ID is {this.state.carid}</p>

      <p> Name is {this.state.carname}</p> 

      <p>Price is {this.state.carprice} </p>

      <p>Car Number is {this.state.carnumber} </p>

      

      </div> );

      

    }

  }

  

Call under app.JS file

import './App.css';

import { Car } from './Car';

function App() {

  return (

  

      <div>

          

       <Car A="FORD " />

       

      </div>

   

  );

}

export default  App;

Code of Index.JS File:-

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './app';

import reportWebVitals from './reportWebVitals';

ReactDOM.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>,

  document.getElementById('root')

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

Example2:-  State Example using setter Method means change State value dyamically.

import React from "react";

export class Car extends React.Component {

    constructor(props)

    {

        super(props);

        this.state = 

          {

            'carid':1002,

            'carname':'Ford Figo',

            'carprice':500000,

            'carnumber':'MP09 1212' 

          }

        console.log("constructor block");

    }

    changeCarInfo = () => {

      this.setState({carname: "Ford Aspire"});

      this.setState({carprice: 800000});

      this.setState({carnumber: "MP09 1234"});

    }

    render() {

      return( <div> 

      <p> Car Company is {this.props.A} </p>  

      <p> ID is {this.state.carid}</p>

      <p> Name is {this.state.carname}</p> 

      <p>Price is {this.state.carprice} </p>

      <p>Car Number is {this.state.carnumber} </p>

      <p><input type="button" onClick={this.changeCarInfo} value="Click"  ></input></p>

      </div> );

      

    }

  }

  

In the above example when we click on the button the state value will be changed.

Call under app.JS file

import './App.css';

import { Car } from './Car';

function App() {

  return (

  

      <div>

          

       <Car A="FORD " />

       

      </div>

   

  );

}

export default  App;

State program example in React JS

import React, { Component } from 'react';  

export class Controlledcomponent extends React.Component

{

    constructor(props) {  

        super(props);  

        this.state = {value:'',value1:'',value3:''}

        this.handleSubmit = this.handleSubmit.bind(this); 

        this.handleSubmit1 = this.handleSubmit1.bind(this);   

        this.circleArea = this.circleArea.bind(this);

        this.triangleArea = this.triangleArea.bind(this);

        this.rectArea = this.rectArea.bind(this);

        this.Area = this.Area.bind(this);  

      

       // this.updateSubmit = this.updateSubmit.bind(this);  

         

    } 

    handleSubmit(event)

    {

        this.setState({value:event.target.value});

    }

    handleSubmit1(event)

    {

        this.setState({value1:event.target.value});

    }

    circleArea(event) {  

        this.setState({value3:event.target.value});

     

        

    }  

    triangleArea(event) {  

        this.setState({value3:event.target.value});

        

           

     }  

     rectArea(event) {  

        this.setState({value3:event.target.value});

          

     }   

    Area(event) {  

      // alert(this.state.value3);

        if(this.state.value3 == "Cirlce")

        {

        var c = 3.14 * parseInt(this.state.value)+parseInt(this.state.value);

        alert("Result of cirlce is "+c);    

        }

        else if(this.state.value3 == "Triangle")

        {

            var c = (parseInt(this.state.value)*parseInt(this.state.value1))/2;

            alert("Result of triangle is  "+c);

        }

        else

        {

            var c = parseInt(this.state.value)*parseInt(this.state.value1);

            alert("Result of rectangle "+c);

        }

         event.preventDefault();  

     } 

    

    render() {  

        return (  

          <form onSubmit={this.Area}>  

            <h1>controlled Form Example</h1>  

            <p>Num1:  

                <input type="text" onChange={this.handleSubmit}  />  

            </p>  

            <p>Num2 :  

                <input type="text" onChange={this.handleSubmit1}   />  

            </p>  

            <p>

            <input type="submit" value="Cirlce" onClick={this.circleArea} /> 

            </p>

            <p>

            <input type="submit" value="Triangle" onClick={this.triangleArea} />  

            </p>

            

            <p>

            <input type="submit" value="Rectangle" onClick  ={this.rectArea} />   

            </p>

             

          </form>  

        );  

      }  

}