import React, { useState } from 'react'
import { ListGroup, Row, Col } from 'react-bootstrap';

function ClosedList(props) {
  const [list, setList] = useState([
    { room: '테스트 방1', memnum: 5, admin: '가영' },
    { room: '테스트 방2', memnum: 4, admin: '수현' }]
  );
  function enterChatroomCH(e) {
    const roomName = e.target.name
    props.enterChatroom(roomName) // 각각의 room으로 들어가도록 설정해야 함
    props.setRoomName(roomName)
    props.clearChat()
  }

  return (
    <div>
      <Row>
        {list.map((list, index) =>
          <ListGroup key={index}>
            <ListGroup.Item action onClick={enterChatroomCH} name={list.room}>
              {list.room}
            </ListGroup.Item>
          </ListGroup>
        )}
      </Row>
      <Col>

      </Col>
    </div>
  )
}

export default ClosedList