Reusing components

There's one more change I want to make before we finish up with our LoginContainer skeleton.

We talked earlier about making React components reusable, so you can implement the same code in multiple places in your application. We should try to split our UI into as many small and reusable pieces as possible to save us time, and I see a great candidate in our LoginContainer.

LoginContainer won't be our only container. In the next few chapters, we'll create new pages with different content, but we want them to have the same look, and we'll want to have the Chatastrophe logo and title at the top in the same place as it is now.

What I propose is that we make a new Header component that we can save for future use.

Now, we made our LoginContainer a class component because we needed to use state and methods. Our header, on the other hand, won't have any state or functionality; it's literally just a piece of UI. The best choice is to make it a functional component, because we can.

Inside our src/ components folder, make a new file called Header.js. Then, we can create the skeleton of a functional component. Copy and paste the relevant div#Header from LoginContainer and add it as the return statement:

import React from 'react';

const Header = () => {
  return (
    <div id="Header">
      <img src="/assets/icon.png" alt="logo" />
      <h1>Chatastrophe</h1>
    </div>
  );
};

export default Header;

Now, back in our LoginContainer, we want to import our header, as illustrated:

import Header from './Header';

Then we can replace the div#Header with a simple <Header /> tag:

render() {
 return (
   <div id="LoginContainer" className="inner-container">
     <Header />
     <form onSubmit={this.handleSubmit}>

That's it! That's all it takes to make a small, reusable component. Our LoginContainer now looks cleaner, and we’ve saved ourselves some typing down the road.

Our login form looks fantastic, but there's a problem. As you demo it for the team at Chatastrophe headquarters (the team having somehow swelled to twenty, despite you being the only developer), an intern raises her hand--"How does it actually, you know, work?"