Create a React Component to Display Status Messages
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.