Adding elements to the Header component

We're going to work on the Header component a little more so that it eventually looks as follows:

So, the Header component will contain the app name, which will be Q & A, a search input, and a Sign In link.

With the app still running, carry out the following steps to modify the Header component:

Add the app name inside an anchor tag inside the div tag by replacing the word header, which was previously used inside the div:

export const Header = () => (
  <div>
    <a href="./">Q & A</a>
  </div>
);

Notice that the implicit return statement containing the JSX is now in parentheses.

When an implicit return statement is over multiple lines, parentheses are required. When an implicit return is on just a single line, we can get away without the parentheses.
Prettier automatically adds parentheses in an implicit return if they are needed, so we don't need to worry about remembering this rule.

Add an input to allow the user to perform a search:

<div>
  <a href="./">Q & A</a>
  <input type="text" placeholder="Search..." />
</div>

Add a link to allow users to sign in:

<div>
  <a href="./">Q & A</a>
  <input type="text" placeholder="Search..." />
  <a href="./signin"><span>Sign In</span></a>
</div>

The Sign In link needs a user icon next to it. We're going to use the user.svg icon from Zondicons. So, if you haven't downloaded these icons, do so and place user.svg in our project's src folder.
We are going to create a component to host this icon, so create a file called Icons.tsx and enter the following content into it:

import React from 'react';
import user from './user.svg';

export const UserIcon = () => 
  <img src={user} alt="User" width="12px" />;

Here, we have created a component called UserIcon that renders an img tag, with the src attribute set to the svg file we imported from user.svg.

Let's go back to Header.tsx and import the icon component we just created:

import { UserIcon } from './Icons';

Now, we can place an instance of the UserIcon component in the Header component inside the button, before the span:

export const Header = () => (
  <div>
    <a href="./">Q & A</a>
    <input type="text" placeholder="Search..." />
    <a href="./signin">
      <UserIcon />
      <span>Sign In</span>
    </a>
  </div>
);

Let's look at the running app:

Our header doesn't look great, but we can see the elements in the Header component we just created. We'll tidy our Header component up later in this chapter, that is, when we learn how to style components.

Table of Contents for Adding elements to the Header component

Create new playlist

Sign In

Sign Up

Table of Contents for
Adding elements to the Header component