const[count, setCount]=React.useState(0);const[count2, setCount2]=React.useState(0);// increments count by 1 when first button clickedfunctionhandleClick(){setCount(count +1);}// increments count2 by 1 when second button clickedfunctionhandleClick2(){setCount2(count2 +1);}return(<div><h2>AReact 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>);
importReact,{ useState }from'react';functionExample(){// 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>);}
importReact,{ useState }from"react";constCounter=()=>{// Here we use the useState -->const[count, setCount]=useState(0);// Here we make the function of the Count with setCountconstonClick=()=>{setCount(count +1);};return(<div><p>YouClicked{count}OnTheButton</p><button onClick={onClick}>ClickMe></button></div>);};exportdefaultCounter;
// Initialize useState.const[stateVar, setStateVar]=useState();// The useState parameters define the default value of stateVar.useState();// stateVar === undefineduseState(true);// stateVar === trueuseState('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);functiontoggleActive(){setIsActive(!isActive);}
// Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.importReact,{ useState }from'react';functionExample(){// 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>);}
importReact,{ useState }from'react';functionExample(){// 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>);}
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)CodeEx.: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 clickedconsthandleDelete=(id)=>{const newBlogs = blogs.filter(blog=> blog.id!== id);setBlogs(newBlogs);}// React renders the following JSXreturn(<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">HidePost</button></div>))}</div>);