1. 19
    Create a React Component to Display Status Messages
    2m 35s

Create a React Component to Display Status Messages

Andy Van Slaars
InstructorAndy Van Slaars
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 5 years ago

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.

[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.

egghead
egghead
~ 24 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today