useState() Hook
What is State?
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
What does calling useState do?
It declares a “state variable”. Our variable is called count but we could call it anything else, like state.
What do we pass to useState as an argument?
The only argument to the useState() Hook is the initial state. In Classes the state should be Object, but in Hooks it does not need to be Object. We can keep a number or a string if that’s all we need. In our example,0 is the initial state.
What Do Square Brackets Mean?
You might have noticed the square brackets when we declare a state variable:
const [count, setCount] = useState(0);
This JavaScript syntax is called “array destructuring”. It means that we’re making two new variables count and setCount, where count is set to the first value returned by useState, and setCount is the second.
What does useState() give us?
useState gives us two variables and we can name our two variables whatever we want. Just know that:
- The first variable is the value. Similar to
this.state - The second variable is a function to update that value. Similar to
this.setState
The final part to useState is the argument that we pass to it. The useState argument is the initial state value. In the case of our counter, we started at 0.
Here in this example you will see , how to use useState(0) , number values
import React, {useState} from 'react';
function App() {
const [count, setCount] = useState(0)
return (
<div>
<button onClick={()=>setCount(count+1)}>Count {count}</button>
</div>
);
}
export default App;
Here in this example you will see , how to use useState("string") , string values
import React from 'react';
import {useState} from 'react'
function Usestate() {
const [data,setData] = useState("react js")
return (
<div className="Usestate">
<h2>{data}</h2>
<button onClick={()=>setData("use state")}> Update Data</button>
</div>
);
}
export default Usestate;
Boolean Values with useState() with Conditional Operator,
in If Else , statement..
import React, { useState } from 'react';
function App() {
var [login,logOut] = useState(false);
if (login)
{
return (
<div>
<h2>this is login</h2>
</div>
)
}
else
{
return(
<div>
<h2>this is logOut</h2>
</div>
)
}
}
export default App;
and with ternary operator ::
import React, { useState } from 'react';
function App() {
var [login,logOut] = useState(false);
return (
<div>
{login ? <h2>this is login</h2> : <h2>this is logOut</h2>}
</div>
)
}
export default App;
useState with Object..using onChange() Event
import React, {useState} from 'react';
function App(){
var [fName, lName] = useState({
name:"reactjs",
email:'demo@gmail.com',
})
var nameHandelChange=(e)=>{
lName(e.target.value);
}
var emailHandelChange =(e)=>{
lName(e.target.value);
}
return(
<div>
<form>
<input value={fName.name} onChange={nameHandelChange}
placeholder="user name"/>
<input value={fName.email} onChange={emailHandelChange}
placeholder="email" />
</form>
</div>
)
}
export default App;
onChange() Event with Radio Button
import React, {useState} from 'react';
function App(){
var [formData, setformData] = useState({
isAgree : false, //checkbox
gender :"male" //radio
})
var handleChange = event =>{
var target = event.target
var name = target.name
var value = target.value
setformData({
...formData,
[name]: value
})
}
return(
<div>
<label>Male ::</label>
<input type="radio" name="gender" value="male"
onChange={handleChange} checked={formData.gender=="Male"} />
<label>Female ::</label>
<input type="radio" name="gender" value="female"
onChange={handleChange} checked={formData.gender=="Female"} />
<p>
Gener : {formData.gender}
</p>
</div>
)
}
export default App;
Show & Hide , Events in Functional Component
import React, { useState } from 'react';
import './App.css';
function App() {
const [isShown, setIsShown] = useState(false);
return (
<div className="App">
<button
onMouseEnter={() => setIsShown(true)}
onMouseLeave={() => setIsShown(false)}>
Hover over me!
</button>
{isShown && (
<div>
I'll appear when you hover over the button.
</div>
)}
</div>
);
}
export default App;
