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

Already subscribed? Sign In

Autoplay

    Create a React Component to Display Status Messages

    Andy Van SlaarsAndy Van Slaars

    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.

    reactReact
    15 - 16
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    00:00 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.

    00:20 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.

    00:29 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.

    00:55 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.

    01:18 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.

    01:33 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.

    01:53 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.

    02:23 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.

    Discuss

    Discuss