Handle Data Using React State

 

useState is something that returns a stateful value and a function to update that stateful value.

 

Use useState Hook- Set Hook

• Purpose: use to re render our react components on the fly for the user.
• Syntax: useState returns two items in an array.
  • The first element is the variable/ de-structured array that uses useState so we can get the users out in 
    • For Destructured array, you have to create 2variables that you want to structure to be able to use in your application.
• The second variable is a function on setting that state.

 

 

 

Code SetUser Method of useState

• Change the state setUsers, which will then re render the page. If you don't use the setUsers, there will be no re rendering of the application.

 

 

 

Call addUser Method, which indirectory change state and re render page after adding new uesr in users array

 

When we click add new User button, It will get it automatically rendered the entire page

 

We are creating a const users as set to user, which is destructuring the useState that we passed in. Which is going to return an array of each element inside the users variable. In the set users, which is to set and change the users that we need to be rendered by state.