import * as React from 'react';

function Gamenight(props) {

    let games = props.gamenight.game_list.map(g =>
      (
        <li>
          <span>{g.name}</span>
        </li>
      )
    );

    let participants = props.gamenight.participants.map(p =>
      (
        <li>
          <span>{p.username}</span>
        </li>
      )
    )

    return (
      <div>
        <h3>{props.gamenight.name}</h3>
        <button onClick={(e) => props.onDismis()}>x</button>
        <span>{props.gamenight.datetime}</span>
        <h4>Games:</h4>
        <ul>
          {games}
        </ul>
        <h4>Participants:</h4>
        <ul>
          {participants}
        </ul>
      </div>
    )
}

export default Gamenight