This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Show Temporary Messages in a React Application

2:41 React lesson by

We’ll add a message object to the application state and use that message to conditionally show a message component. We’ll also use a setTimeout to update our state and hide the message after a specified period of time.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We’ll add a message object to the application state and use that message to conditionally show a message component. We’ll also use a setTimeout to update our state and hide the message after a specified period of time.

When an item is added to our todos, we're performing an optimistic UI update, meaning we're updating the todos in our state without waiting for a response from a server. This gives us a responsive UI, but it would be nice to have some kind of confirmation that our save was successful.

Let's add a message to the UI when we get a response from the server. I'll start by replacing this call console.log in handleInputChange with a call to this.setState. I'll set a property on the state called message to our todo Added text. Now our state has a message property, we need to render it out.

App.js

createTodo(newTodo)
    .then(() => this.setState({message: 'Todo added' }))

I'm going to duplicate this line. I'm going to say, if our message is defined then we'll render out a <span> with a classname of 'success', and its content will be this.state.message. I'll save this and after the browser reloads I'll add a new todo.

<div className="Todo-App">
    {this.state.errorMessage && <span className='error'>{this.state.errorMessage}</span>}
    {this.state.message && <span className='success'>{this.state.message}</span>}
</div>

We should see Todo Added displayed. The problem with this is that message is going to sit there and it won't go away.

Todo Added

Let's comeback into our code and let's make this a temporary message. I'm going to define a new method, I'll call showTempMessage.

This is going to accept the msg argument, and showTempMessage is going to call this.setState. We're going to use it to set the message property to the passed in msg value. Then we're going to call setTimeout().

showTempMessage = (msg) => {
    this.setState({message: msg})
    setTimeout()
}

setTimeout is going to call this.setState again, also setting the message property, but this time setting it to an empty string. setTimeout takes the time out value, so I'll make it two and a half seconds.

showTempMessage = (msg) => {
    this.setState({message: msg})
    setTimeout(() => this.setState({message: ''}), 2500)
}

I'm going to come up here to our .then after we call createTodo.
This time I'm going to call this.showTempMessage. I'll take the object out of here and we'll just pass in the text "Todo added".

createTodo(newTodo)
    .then(() => this.showTempMessage('Todo added'))

I'll save this and I'll give the browser a chance to reload. After I've started up again I'll add another todo. Our message will be displayed, and after two and a half seconds, it will disappear.

We can clean this up just a little bit, so I'm going to open up App.css. Down here, along with our error class, I'm just going to paste in .success class, that will make the text green. We'll save that and I'll add another to do.

App.css

.success {
    color:green;
}

Everything's working as expected.

Green Working Message

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?