React js Hooks
useState() Hook - in React js
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
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;
useState() with Boolean value / if - else
You can use an
You can use an
if...else condition when setting the state with useState in React — typically within an event handler or inside useEffect, not directly inside the useState() function call (which should be synchronous and simple). 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;
useState() with Ternary Operator
Using useState with a ternary operator in React is a common way to conditionally set or display values based on some logic. Here's a clear example showing both how to use it in a setter and in JSX.
import React, { useState } from 'react';
export default function App() {
var [login,logOut] = useState(false);
return (
<div>
{login ? <h2>this is login</h2> : <h2>this is logOut</h2>}
</div>
)
}
useState() with ARRAY
In React JS, arrays are commonly used to store lists of data like items, users, or posts.
Here's a quick overview of how arrays work in React:
import React, { useState } from 'react'
export default function Home() {
var [fvalue,svalue] = useState(["reactjs","javascript","nodejs"]);
return (
<div>
<ul>
{
fvalue.map((fvalue)=>(
<li>{fvalue}</li>
))
}
</ul>
</div>
)
}
useState() with JSON Data - array with objects
In React JS, you can use the
useState hook to manage JSON data just like any
other stateful data. Here's a simple example to show how to work with
JSON data using useState.import React, { useState } from 'react'
export default function Home() {
var [fvalue,svalue] = useState([
{ id: 1, name: 'Alice', age: 25 },
{ id: 2, name: 'Bob', age: 30 },
]);
return (
<div>
<ul>
{
fvalue.map((fvalue)=>(
<li>{fvalue.name},{fvalue.age}</li>
))
}
</ul>
</div>
)
}
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;
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;
