import React from 'react' import { Flex } from 'reflexbox' import { Text, Space, Button } from 'rebass' import Immutable from 'seamless-immutable' const GameList = (props) => ( <div> {Immutable.asMutable(props.games).map((game, index) => { const joinGame = () => props.joinGame(game.id) return (<Flex key={index}> <Text>{game.name}</Text> <Space auto /> <Button onClick={joinGame}>Join</Button> </Flex>) })} </div> ) export default GameList