Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create a React Component to Display Status Messages

    15 - 16

    In this lesson we’ll add a new stateless functional component to our application, update our CSS and verify that our message component is rendered only when there is a message to display.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Let's add a component to show status messages in our application. We'll start by creating a new file in components directory called message. We'll start by importing React from React. Message is going to be a stateless functional component.

    I'm just going to drop down here, declare a constant called message. Then I'm going to set that to equivalent function that's going to take props. Then we're going to return some JSX.

    Now, what I want to do is if props.message is defined I'm going to return a span, then I'm going to give that span a class name of message. Then inside that span I'm just going to use props.message and my text. If props.message is not defined I'm just going to return no.

    I can shorten this further like destructuring my props and just extracting message directly out of the props that are passed in, and then I can remove this props.message. Now we can clean up our inaudible a little bit by breaking it out into multiple lines, making it a tiny bit more readable.

    Now that the component's defined I'm going to drop down to the bottom of the file and I'm going to export default message. Then I can save that. Now, I'm going to open up app.css and I'm going to come down to where I have my todo app class defined.

    I'm going to bump up this top hat into 35 pixels. I'm going to save that. We'll see that everything shifts down a tiny bit. This is where I want my message to be displayed. In order to do that I'm going to drop down to the bottom of the file and I'm just going to paste in a class that I've defined. That's going to set up my message class and I can save that.

    Now, I'm going to open up app.js and I'm going to import my message. We'll import that from component/message. Then down in my render right above my todo form I'll declare a message and I'll give it the message prop and we'll just give it some sample text and I can save this.

    When the browser reloads we'll see that we have the message component displayed. If I leave that component there but I delete the message prop we should expect it to not render. Now everything's working as expected.