How to use useState Hook in React.js
published on 8/16/2021Hooks were introduced in React version 16.8. In order to replace the conventional this.state in Class component.
Steps of Using useState
Hook
Step 1
We need to import the Hook from react
import { useState } from "react";
Step 2
Declare a const variable and assign the useState function as follow
// conventional way to use sateconst [state, setState] = useState(InitialState);
Step 3
How to set state and use state, The useState Hook returne's two parameters one to set the state and the other to get the state value.
import React, { useState } from 'react';function Example() {// Declare a new state variable, which we'll call "name"const [name, setName] = useState("");return (<div>{name&&<p>You {Name}</p>)<label for="name">name:</label><input type="text" id="name" name="name" value={name}onChange={()=>setName(e.target.value)}/></div>);}
Traditional ways of using state, This method is a bit tricky use a the beginning, Becouse it has the key word this
that make thing complex
class Example extends React.Component {constructor(props) {super(props);this.state = {name: ""};}render() {return (<div>{name&&<p>You {Name}</p>)<label for="name">name:</label><input type="text" id="name" name="name" value={this.state.name}onChange={()=>this.setState({name:e.target.value})}/></div>);}}