OpenList.js

import React from 'react'
import { ListGroup } from 'react-bootstrap';
import "../Pages/Home.css";

function OpenList(props) {

  function enterChatRoomCH(e) {
    if (props.roomCode) {
      props.closeChatRoom(props.roomCode)
    }
    const roomCode = e.target.name
    props.openListroom(roomCode)
    props.setRoomCode(roomCode)
  }

  return (
    <div style={{ height: "80vh" }}>
      <div style={{ overflow: 'auto', height: "80vh" }}>
        {props.openlist.map((item, index) =>
          <ListGroup key={index}>
            <ListGroup.Item action onClick={enterChatRoomCH} name={item.roomId} className='rounded-0'>
              {item.roomName}
            </ListGroup.Item>
          </ListGroup>
        )}
      </div>
    </div>
  )
}

export default OpenList