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'
import { render } from 'react-dom'
const randomDiceRoll = () => {
return Math.floor(Math.random() * 6) + 1
}
export default function App() {
const [diceRolls, setDiceRolls] = useState([1, 2, 3])
return (
<div>
<button
onClick={() => {
setDiceRolls([diceRolls, randomDiceRoll()])
}}
>
Roll dice
</button>
<ul>
{diceRolls.map((diceRoll, index) => (
<li key={index}>{diceRoll}</li>
))}
</ul>
</div>
)
}
render(<App />, document.querySelector('#app'))
xxxxxxxxxx
const [count, setCount] = React.useState(0);
const [count2, setCount2] = React.useState(0);
// increments count by 1 when first button clicked
function handleClick(){
setCount(count + 1);
}
// increments count2 by 1 when second button clicked
function handleClick2(){
setCount2(count2 + 1);
}
return (
<div>
<h2>A React counter made with the useState Hook!</h2>
<p>You clicked {count} times</p>
<p>You clicked {count2} times</p>
<button onClick={handleClick}>
Click me
</button>
<button onClick={handleClick2}>
Click me2
</button>
);
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
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
xxxxxxxxxx
//The useState Hook
//useState is a Hook that lets you
//add React state to function components.
//after a state is changed, the page is rerendered, refecting
//the state change
import React, { useState } from 'react';
function Example() {
// here we declare the state variable count
//and its function or 'setter', setCount
const [count, setCount] = useState(0);
//It returns a pair of values: the current state(count)
//and a function that updates it(setCount)
return (
<div>
<p>You clicked {count} times</p>
//{*setCount is the function that updates the value*}
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
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
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
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
// Initialize useState.
const [stateVar, setStateVar] = useState();
// The useState parameters define the default value of stateVar.
useState(); // stateVar === undefined
useState(true); // stateVar === true
useState('Hamburger'); // stateVar === 'Hamburger'
// setStateVar is a function that sets the value of stateVar.
setStateVar(value);
// stateVar is equal to the value that was set in the setStateVar-function.
stateVar
/*
Example usage - Everytime you run toggleActive, the isActive
variable will toggle between false and true.
*/
const [isActive, setIsActive] = useState(false);
function toggleActive() {
setIsActive(!isActive);
}