Quick Contact


    REACT STATE

    State is managed within the component in which variables declared in function body. State can be changed. State can be accessed using “useState” Hook in functional components and “this.state” in class components. Hook is a new feature in react. To use this expression it’s essential to have good understanding of class components. State hold information that used for UI by browser.

    To use state or state expressions in react, let’s take an example of one component-:

    		Import new from “./components/new”;
    		Import file from “./components/file”;
    		Function App() {
    		Const [counter, setCounter] = useState(0);
    		Const [toggle, setTogg] function(): void se);
    		Const incrementer= () => {
    		setCounter(counter + 1);
    		console.log(counter);
    		};
    		Const toggler = () => {
    		 setToggle((prev) => !prev);
    		};
    		Return (
    		  < div classname=”App”>
    		< Nav/>
    		< file nr={counter}/>
    		< /div>
    		);
    		}
    		Export default App;
    	
    Output is shown with counter, as when you click on 0 it will increment accordingly as following-:
    React State
    React State

    State is similar to props but state is fully controlled and it is more private by the component. You can create state only in class component. It is possible to update and modify the state.

    There are two ways to initialize state in React Component.

    1. Directly inside class
    2. Inside the constructor
    Directly inside class
    		Class Student extends Component {
    		//States –Here it is class property
    		State = {
    		   Name:””,
    		Prop1:this.props.prop1
    		}
    		Render() {
    
    		}
    		}
    	
    Inside the Constructor
    		Class Student extends Component {
    		   Constructor(props){
    		//it is required to call the parent class constructor
    		Super(props);
    		This.state = {
    		 Name:””,
    		Prop1:this.prop.prop1
    		}
    		}
    		Render() {
    		}
    		}
    	
    • When component class is created constructor is first method, it is right place to add state.
    • Class instance is already created in memory you can use ‘this’ to set properties on it.
    • When you write constructor make sure to call parent class constructor by super props
    • When you call super with props. React will make props available across the component through this.props.

    Like props state holds information about component. State is used when component needs to keep track of information as when component itself can create, update and use State. Understand with code example in which component is created in which there is a button which keep tracks of how many times you have clicked it.

    		Class boxbutton extends React.Component {
    		   Constructor ()  {
    		    Super ();
    		This.state = {
    		  Count : 0
    		};
    		}
    		updateCount () {
    		    this.setState ((prevState, props) => {
    		   return { count : prevState.count + 1 }
    		 });
    		}
    		Render() {
    		      Return (< button
    		    onClick={() => this.updateCount () }
    		>
    		Clicked {this.state.count} times
    		< /button>);
    		}}
    
    		Moreover about State- State is created in component using constructor as-:
    		Constructor () {
    		   Super() ;
    		This.state = {
    		  Count: 0,
    		};
    		}
    	
    Lets look at more factors about state-:
    State is Changeable in which updateCount is used again to explain
    		updateCount () {
    	    	this.setState ((prevState, props) => {
    	   	    return { count : prevState.count + 1 }
    	     	});
    	     	}
    	

    setState is run asynchronously and it needs callback function rather than update state directly which saves the prevState after the updation too.

    Now in last look step by step how counter flow works-:

    1. First component is initialised and set.count is set to be 0
      			This.state = {
      		   	Count: 0,
      			};
      		
    2. 2) And the it renders within component with “click0times”

      Clicked {this.state.count} times

    3. And the it renders within component with “click0times”

      Clicked {this.state.count} times

    4. When user clicks the button then UpdateCount is called.

      OnClick={ () => this.updateCount () }

    5. With u”pdateCount” “setState” calls with callback to increase counter from pervious state value.
    6. And then setState call to render
      			This.setState ((prevState, props) => {
      			    Return {count : prevState.count+1 }
      			});
      		
    7. In last component renders with clicked 1 times .

    Copyright 1999- Ducat Creative, All rights reserved.