xxxxxxxxxx
useState - Has the main purpose to change an element status
useState basically helps React to know what to elements need to be rerendered.
Ex: We have a post (state: it is displayed)
You want to eliminate the post (setState: it is not displayed)
Code Ex.:
const [blogs, setBlogs] = useState([
{ title: 'React forever', body:'Lorem ipsum...', author: 'Sara', id: 1 },
{ title: 'Vue kinda sucks', body:'Lorem ipsum...', author: 'Tony', id: 2 },
{ title: 'Angular lets not go there', body:'Lorem ipsum...', author: 'John', id: 3 },
]);
// The JS function that filters all the post with diff. id from the id of the post clicked
const handleDelete = (id) => {
const newBlogs = blogs.filter(blog => blog.id !== id);
setBlogs(newBlogs);
}
// React renders the following JSX
return (
<div className="blog-list">
<h2>{ title }</h2>
{blogs.map((blog) => (
<div className="blog-preview" key={blog.id}>
<h3>{ blog.title }</h3>
<p>written by { blog.author }</p>
<p>{ blog.body }</p>
<button onClick={() => handleDelete(blog.id)} className="hideBtn">Hide Post</button>
</div>
))}
</div>
);
xxxxxxxxxx
import React, { useState } from 'react';
function StepTracker() {
const [steps, setSteps] = useState(0);
function increment() {
setSteps(prevState => prevState + 1);
}
return (
<div>
Today you've taken {steps} steps!
<br />
<button onClick={increment}>
I took another step
</button>
</div>
);
}
ReactDOM.render(
<StepTracker />,
document.querySelector('#root')
);
xxxxxxxxxx
// SampleButton.js
import { useState } from 'react';
export default function SampleButton() {
const [count, setCount] = useState(0) // count is initialized to 0
function handleClick() {
setCount(count + 1);
}
return (
<button onClick={handleClick}>
Times clicked: {count} {/* label updates after each click */}
</button>
)
}
// Documentation: https://react.dev/learn/state-a-components-memory
xxxxxxxxxx
// Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
xxxxxxxxxx
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
</>
);
}
xxxxxxxxxx
import React, { useState } from 'react';
function Counter() {
// Define the state variable "count" and the state update function "setCount"
const [count, setCount] = useState(0);
const increment = () => {
// Update the "count" state by increasing its value by 1
setCount(count + 1);
};
const decrement = () => {
// Update the "count" state by decreasing its value by 1
setCount(count - 1);
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter;
xxxxxxxxxx
import React, { useState } from "react";
const Counter = () => {
// Here we use the useState -->
const [count, setCount] = useState(0);
// Here we make the function of the Count with setCount
const onClick = () => {
setCount(count + 1);
};
return (
<div>
<p>You Clicked {count} On The Button</p>
<button onClick={onClick}>Click Me></button>
</div>
);
};
export default Counter;
xxxxxxxxxx
import React, { useState } from 'react';
//for boolen(true,false)
const [online,setOnline] = useState(true);
//for data (storing)
const [users,setUsers] = useState([
{id:1,name:"John Doe"},{id:2,name:"Merry"},
]);
return(
<div classsName="container">
<h1 className={`$online ? 'text-success' : 'text-danger' `}> green is online , red is offline </h1>
<button onClick={() => setOnline(!online)}>Switch</button>
</div>
xxxxxxxxxx
import React, {useState} from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
xxxxxxxxxx
import { useState } from "react";
const App = () => {
const [name, setName] = useState("imran");
const handleInputChange = (event) => {
setName(event.target.value);
};
const handleRename = () => {
// Perform any additional logic if needed
// For now, we'll just update the name directly
// based on the input value
setName(name);
};
return (
<div>
<h1>{name}</h1>
<input type="text" value={name} onChange={handleInputChange} />
<button onClick={handleRename}>Rename</button>
</div>
);
};
export default App;