Learn React Hooks

Adjusting Logout

There is still one thing missing for the users feature—we cannot log out yet.

Let's make the Logout component dynamic now:

1. Edit src/user/Logout.js, and add the setUser prop:

export default function Logout ({ user, setUser }) {

2. Then, adjust the onSubmit handler of form and set the user to '':

            <form onSubmit={e => { e.preventDefault(); setUser('') }} />

As we are not creating a new Hook here, we do not need to import the useState Hook from React. We can simply use the setUser function passed to the Logout component as a prop.

Now, the Logout component sets the user value to '' when we click on the Logout button.