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