ContainersVsComponentsExamples.jsx

// containers vs components, a component cannot use anything not passed in via props,
// and can only communicate via callbacks passed via props

// Approach: one provider per data
<GameDataProvider gameId={this.props.gameId}>
  {gameData =>
    <GameProvider gameId={this.props.gameId}>
      {game => 
        <ServerListContainer query={this.props.query}>
          {servers =>
            <ServerList servers={servers}>
              <ServerListItemsContainer servers={servers}>
                {(server, focusItem) => {
                  <ServerListItem server={server} focusItem={focusItem} game={game}
                                  onJoin={(role) => GameActions.joinServer(createJoinOptions(server, role))}
                                  onViewDetails={() => CoreActions.gotoLocation(game.serverDetailsRoute + "?blazeGameId=" + server.gameId)}/>
                }}
              </ServerListItemsContainer>
            </ServerList>
          }
        </ServerListContainer>
      }
    </GameProvider>  
  }
</GameDataProvider>

// Approach: umbrella container
<ServerListContainer gameId={this.props.gameId}, query={this.props.query}>
  {(servers, game, roles, hasUGCAccess, party) =>
    <ServerList servers={servers} game={game}>
      {servers.map(server =>
        <Focusable debugName={"server" + server.gameId}>
          {focusItem => <ServerListItem server={server} focusItem={focusItem} hasUGCAccess={hasUGCAccess} roles={roles} party={party}
                                        onJoin={(role) => GameActions.joinServer(createJoinOptions(server, role))}
                                        onViewDetails={() => CoreActions.gotoLocation(game.serverDetailsRoute + "?blazeGameId=" + server.gameId)}/>}
        </Focusable>
      )}
    </ServerList>
  }
</ServerListContainer>

// Approach: shrink wrapped container
<ServerListContainer gameId={this.props.gameId} query={this.props.query}/>