Problems with conditional rendering

Question

I'm trying to mark divs that is clicked on my website. When I click, the array is updated but the mark won't show. It seems like the statement gameChoices.includes('Fortnite') is false, even though the array contains the exact value Fortnite.

Does anyone know why this happens? Eventually a new solution for the problem?

Code:

<Container onClick={() => {
  if (gameChoices.includes('Fortnite')) {
    const findIndex = gameChoices.findIndex(a => a === 'Fortnite')

    findIndex !== -1 && gameChoices.splice(findIndex , 1)
  } else if (gameChoices.includes('Fortnite') === false) {
    gameChoices.push('Fortnite')
  }
}} fluid className="d-flex fortnite gameoption position-relative">
  {gameChoices.includes('Fortnite') ? 
    <>
      <BsCheckSquare color="lightgreen" size="2rem" style={{ top: '50%', right: '50%' }} />
    </>
    : null
  }
  <h1 className="fw-bolder text-light text-center m-auto">FORTNITE</h1>
</Container>

const [gameChoices, setGameChoices] = useState([])

2 Suggestions. Do not use inline click handler. It makes your markup difficult to read. findIndex !== -1 is not required as you are already checking if it is included in array. — Rajesh Dixit
– Rajesh Dixit, Commented Dec 21, 2022 at 13:12
You can also add some log statements and see what the contents of gameChoices is. — lapadets
– lapadets, Commented Dec 21, 2022 at 13:13
Also gameChoices.includes('Fortnite') === false is redundant. Just a simple else is enough — Rajesh Dixit
– Rajesh Dixit, Commented Dec 21, 2022 at 13:15
gameChoises probably isn't a state variable, update your code to make it a state with the useState() hook — eroironico
– eroironico, Commented Dec 21, 2022 at 13:15

Rajesh Dixit · Accepted Answer · 2022-12-21 13:37:32Z

1

As I have commented:

Do not use inline click handler. It makes your markup difficult to read.

findIndex !== -1 is not required as you are already checking if it is included in array

Also gameChoices.includes('Fortnite') === false is redundant. Just a simple else is enough

But in addition to this, you need to set value to state.

Apart from that, you should instead look into .some and check for same cased text. You can in addition do trim if game name is coming from user input

const choiceExists = (game) => {
    return gameChoices.some(
    (name) => name.toLowerCase() === game.toLowerCase()
  )
}
const clickHandler = () => {
    const name = 'fortnite'
  if (choiceExists(name)) {
    const newGames = gameChoices.filter((game) => game.toLowerCase() !== name)
    setGameChoices(newGames)
  } else {
    setGameChoices((choices) => choices.concat(name))
  }
}

<Container onClick={clickHandler} fluid className="d-flex fortnite gameoption position-relative">
  {
    gameChoices.includes('Fortnite')
      ? <BsCheckSquare
          color="lightgreen"
          size="2rem"
          style={{ top: '50%', right: '50%' }} />
      : null
  }
  <h1 className="fw-bolder text-light text-center m-auto">FORTNITE</h1>
</Container>

edited Dec 21, 2022 at 13:37

answered Dec 21, 2022 at 13:29

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

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

1 Comment

Daniel Olsen Over a year ago

It worked like a charm! Looks like your solution with filter worked better, since it isn't stuck at false now. Thanks!

Max · Accepted Answer · 2022-12-21 13:26:03Z

1

When you update a reactive state value you should use the state setter method, so setGameChoices((choices)=>[...choices, 'Fortnite'])

answered Dec 21, 2022 at 13:26

Max

1,70611 silver badges11 bronze badges

Collectives™ on Stack Overflow

Problems with conditional rendering

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related