React navabar component using Redux

Navbar.js

import React from "react";
import { connect } from "react-redux";
import LoadingBar from "../components/LoadingBar";

const Layout = ({ auth, name, avatar, loading }) => (
  <div>
    {loading ? (
      <LoadingBar />
    ) : auth ? (
      <div>
        <span>{name}</span>
        <img src={avatar} />
        <button>Cerrar Sesión</button>
      </div>
    ) : (
      <div>
        <button>Iniciar Sesión</button>
      </div>
    )}
  </div>
);

const mapStateToProps = state => ({
  auth: state.auth,
  name: state.user.data.name,
  avatar: state.user.data.avatar,
  loading: state.user
});

export default connect(mapStateToProps)(Layout);