This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

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.5.4 <16.40
    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