Fetching and displaying messages

We will start with the Query component from the beginning. First, however, we have to store the chats that were opened by a click from the user. Every chat is displayed in a separate, small chat window, like in Facebook. Add a new state variable to save the ids of all of the opened chats to the Chats class:

state = {  openChats: []}

To let our component insert something into the array of open chats, we will add the new openChat method to our Chats class:

openChat = (id) => {  var openChats = this.state.openChats.slice();   if(openChats.indexOf(id) === -1) {    if(openChats.length > 2) {      openChats = openChats.slice(1);    }    openChats.push(id);  }  this.setState({ openChats });}

When a chat is clicked on, we will first ...

Get Hands-On Full-Stack Web Development with GraphQL and React now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.