Search
 
SCRIPT & CODE EXAMPLE
 
CODE EXAMPLE FOR JAVASCRIPT

How to use React useState Hook

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>
    );
  
Source by reactjs.org #
 
PREVIOUS NEXT
Tagged: #How #React #useState #Hook
ADD COMMENT
Topic
Name
2+6 =