Reactjs: How to open a multiple message box with reactjs : How to open a multiple message box with reactjs

Am building a multiple chatbox like facebook.

 At the moment, User can call up a chatbox, can close it, minimize it etc.

**Here is the issue.** 

when I click on different users for example three users, am supposed to have three chatbox pop up 
that corresponds to those three different users but its showing just one chatbox.

Any help will be appreciated.


**Here is the full code**

    import React, { Component, Fragment } from "react";
    import { render } from "react-dom";
    import axios from 'axios';
    import './style.css';
    
    
    class MessageBox extends Component {
      constructor() {
        super();
        
        this.state = {
          showBox: false,
           shownToggle: true,
    data: [
            { id: "1", name: "Tony" },
            { id: "2", name: "Mark"},
            { id: "3", name: "Joy"}
          ],
    currentRec: undefined,
    
        };
        
        this.showBox = this.showBox.bind(this);
        this.closeBox = this.closeBox.bind(this);
        this.toggle = this.toggle.bind(this);
      }
      
    
    
    showBox = (i, pid, name) => {
     // showBox(pid, name) {
    
    
        this.setState({ currentRec: i });
        console.log(`Selected record index: ${i}`);
    
    alert(pid);
    alert(name);
    
        //event.preventDefault();
        
        this.setState({ showBox: true }, () => {
         document.addEventListener('click', this.closeBox);
        });
      }
      
      closeBox(event) {
        
        if (this.dropdownBox.contains(event.target)) {
          
          this.setState({ showBox: false }, () => {
          document.removeEventListener('click', this.closeBox);
          });  
          
        }
      }
    
    toggle() {
            this.setState({
                shownToggle: !this.state.shownToggle
            });
        }
    /*
    handleChat(id, name) {
      alert(id);
      alert(name);
        }
    */
    
    
    
      render() {
    
    
    var hidden = {
                display: this.state.shownToggle ? "block" : "none"
            }
    
    
        return (
          <div>
         
    
              <ul  style={{float: "right"}}>
                {this.state.data.map((person, i) => (
    
                  <div className="chat-sidebar" key={i}>
    
                    <button onClick={ () => this.showBox(i, person.id, person.name)}>
                    Chat with {person.name}</button>
                 
    
    
            
            {this.state.showBox
                ? (
    
    
    
    <div className="msg_box" style={{right: '270px'}}>
    <div onClick={this.toggle.bind(this)} class="msg_head">
    (<b style={{color: 'orange'}}> 
    {this.state.currentRec !== undefined && 
                      <div className="modal-body">
                       {this.state.data[this.state.currentRec].name}
                       ({this.state.data[this.state.currentRec].id})
                      </div>}
      </b>)
    
    
    Minimize 
    <div className="close"  ref={(element) => {this.dropdownBox = element;}} style={{color: 'white'}}>Close</div>
     </div>
    <div style={ hidden } className="msg_wrap"> <div className="msg_body">Message will appear here</div>
    </div>           
    </div>
                ): (
                  null
                )}
    
    
    
    </div>
    
                ))}
              </ul>
    
          </div>
        );
      }
    }



**Here is the css**

    /**** Chat Popup Layout******/
    body{
    	background:#e5e5e5;	
    	font-family: sans-serif;
    }
    
    
    .msg_box{
    	position:fixed;
    	bottom:-5px;
    	width:250px;
    	background:white;
    	border-radius:5px 5px 0px 0px;
    }
    
    .msg_head{	
    	background:black;
    	color:white;
    	padding:8px;
    	font-weight:bold;
    	cursor:pointer;
    	border-radius:5px 5px 0px 0px;
    }
    
    .msg_body{
    	background:white;
    	height:200px;
    	font-size:12px;
    	padding:15px;
    	overflow:auto;
    	overflow-x: hidden;
    }
    
    .close{
    	float:right;
    	cursor:pointer;
    }
    .minimize{
    	float:right;
    	cursor:pointer;
    	padding-right:5px;
    	
    }
    
    /**** Slider Layout Popup *********/
    
    
    .chat-sidebar {
         width: 250px;
      
         //position: fixed;
         height: 100%;
         right: 0px;
         top: 0px;
         padding-top: 10px;
         padding-bottom: 10px;
         border: 1px solid #b2b2b2;
    }









