If/else conditional rendering of React components not working

Question

import React, { Component } from 'react';
import axios from 'axios'; 
import { Button, Card } from 'semantic-ui-react';

class Games extends Component {

  state = { games:[], showGames: false }

  componentDidMount() {
    axios.get('/api/board_games')
      .then(res => {
        this.setState({games: res.data});
      })
  }

  toggleGames = () => {
    this.setState({ showGames: !this.state.showGames })
  }

  gamesList = () => {
    const {games} = this.state 
    return games.map( game =>
        <Card key={game.id}>
          <Card.Content>
            <Card.Header>{game.title}</Card.Header>
            <Card.Description>Players: {game.min_players} - {game.max_players}</Card.Description>
            <Card.Description>Company: {game.company}</Card.Description>
            <Card.Description>Time Needed: {game.time_needed}</Card.Description>
          </Card.Content>
          <Card.Content extra>
              <Button basic color='green'>
                Add to Library
              </Button>
          </Card.Content>
        </Card> 
      )
  }

  render() {
    const showGames = this.state 
    return (
      <div>
        <h1>Games</h1>
        <h3>Your Games</h3> 
        { showGames ? (
          <div>

            <Card.Group itemsPerRow={4}>{this.gamesList()}</Card.Group> 
          </div>
        )
          : (
          <button onClick={this.toggleGames()}>Add a Game</button>
        ) 
        }
      </div>
    )
  }
}

export default Games;

In my mind, the render return should be checking if showGames is true or false. It's defaulted to false in the state at the beginning. For that reason, it should render the "add a game" button. But if you click that button, it should toggle the showGames to true and render the game cards. Instead, it automatically renders the cards when I arrive on the page. I would also like to add Done Adding to the first part of the if/else, but when I do that I get " Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops."

const { showGames } = this.state

finico
– finico

2018-11-30 20:54:32 +00:00
Commented Nov 30, 2018 at 20:54 — finico
– finico, Commented Nov 30, 2018 at 20:54

Joey · Accepted Answer · 2018-11-30 21:01:28Z

2

the way you're setting the onClick event is causing it to be constantly called. you should format it either like this:

onClick={this.toggleGames}

or like this:

onClick={() => this.toggleGames()}

answered Nov 30, 2018 at 21:01

Joey

1722 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Harshit Agarwal · Accepted Answer · 2019-05-28 06:33:23Z

1

Just edit the following line in your render() :

const showGames = this.state.showGames;
or
const { showGames } = this.state;

At the moment your showGames constant is an object instead of a boolean. Hence you are not able to use it conditionally.

Hope this helps!

answered May 28, 2019 at 6:33

Harshit Agarwal

2,4222 gold badges18 silver badges24 bronze badges

Comments

Fernando Colom · Accepted Answer · 2018-11-30 21:44:06Z

0

you have set wrong onClick action from the button

// the onClick is executing in every render.
<button onClick={this.toggleGames()}>Add a Game</button>

// right way
button onClick={() => this.toggleGames()}>Add a Game</button>

answered Nov 30, 2018 at 21:44

Fernando Colom

3771 silver badge3 bronze badges

Collectives™ on Stack Overflow

If/else conditional rendering of React components not working

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related