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>
);