Learn React Hooks

The Logout component

Next, we define the Logout component, which is going to display the currently logged in user, and a button to log out:

1. Create a new file: src/user/Logout.js
2. Import React, as follows:

import React from 'react'

3. This time, our function is going to take a user prop, which we are going to use to display the currently logged-in user:

export default function Logout ({ user }) {

Here we use destructuring in order to extract the user key from the props object. React passes all component props, in a single object, as the first argument to a function. Using destructuring on the first argument is similar to doing const { user } = this.props in a class component.

4. Finally, we return a text that shows the currently logged-in