React State

 

React State

*      React state values will be change.

*      React state is mutable.

 

vReact component has a built in state object.

vTo define a state, you have to first declare a default set of values for defining the components initial state

vTo do this, add a class constructor which assigns an initial state using this.state.

vThe ‘this.state’ property can be rendered inside render() method.

This.state.propertyname

vIf you want to change a value in the state object, use the below method.

this.setState()

vWhen a value in the state object changes, the component will re-render, so, the output will change according to the user values

v{}- expressions, values, variables, objects are give to {} braces.

 

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class Reactstate extends React.Component{

  constructor(){

    super();

    this.state={initialvalue:"Welcome",name:" Students"}

  }

  render(){

    return<h1>{this.state.initialvalue}{this.state.name}</h1>

  }

}

 

var mystyle={color:'green',textAlign:'center'}

const element =<div style={mystyle}><Reactstate /></div>;

 root.render(element);

 

Output

 

React State using Button OnClick event

 

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

class Reactstate extends React.Component{

  constructor(){

    super();

    this.state={initialvalue:"Welcome",name:" Students"}

  }

  changevalue=()=>{

    this.setState({initialvalue:"React Js"});

  }

  render(){

    return<div><h1>{this.state.initialvalue}{this.state.name}</h1>

    <br/>

    <button type="button" onClick={this.changevalue}>Exit</button>

   

    </div>

  }

}

 

var mystyle={color:'green',textAlign:'center'}

const element =<div style={mystyle}><Reactstate /></div>;

 root.render(element);

 

 

changes in index.css

body {

  margin: 0;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',

    sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

 

code {

  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

    monospace;

}

 

h1{

background-color: aqua;

color: orangered;

border-style: dotted;

 

}

h2{

background-color: yellow;

color: purple;

border-style: outset;

}

button{

background-color: yellow;

color: red;

font-weight: bolder;

border-color: blue;

}

changevalue{

background-color: yellow;

color: rgb(240, 2, 73);

 

}

 

Output

 

Difference between Property and State

Props	State
Props are immutable.	State is mutable.
Props allow you to pass data from one component as an argument.	State holds information about the components.
Props can be accessed by the child component.	State cannot be accessed by the child Components.
Props are used to communicate between Components.	States can be used for rendering dynamic changes with the Component.