Creating a message

As in our LoginContainer, we need to store the value of our textarea in state as it changes.

We used the state of the LoginContainer to store that value. Let's do the same with ChatContainer.

Note

You may be wondering, after the preceding discussion: why don't we just keep all our state in App? Some will argue for that approach, to keep everything in one place; however, this will bloat our App component and require us to pass multiple props between components. It's better to keep state as high as necessary, and no higher; the new message in the chat input will only be relevant to App when it's done and submitted, not before that.

Let's get that set up.

Add this to the ChatContainer.js:

state = { newMessage: '' };

Also, add a method to handle it:

handleInputChange = e => {
  this.setState({ newMessage: e.target.value });
};

Now, modify our textarea:

<textarea
    placeholder="Add your message..."
    onChange={this.handleInputChange}
    value={this.state.newMessage} 
/&gt...