How do I change state onClick?

Question

How do I set this function to null after setGenreObject state has successfully run? What I want is for the entire CategoryContainer to disappear onClick.

    <CardContainer>
{Object.keys(ClientPdfs).map((ageName, i) => (
                <Card
                  onClick={() => setGenreObject(ClientPdfs[ageName])}
                  key={i}>
                <CategoryContainer>
                  <Overlay />
                  <CategoryPhoto src={ClientPdfs[ageName].image} alt="ages"/>
                  <CategoryName>
                    {ClientPdfs[ageName].name}
                  </CategoryName>
                  </CategoryContainer>
                </Card>
              ))}
            </CardContainer>

Answer 1

Create a variable setting it to null. Let's call it card.

so: let card = null

then we can do some kind of check, eg:

if (!state.hasRun) {
  card = <Card>...</Card>
}

And then you return {card} as the result inside map function.

Answer 2

You can wrap your CategoryContainer inside a bracket and execute it when there is a value present in the genreObject. Take a look at below example.

<CardContainer>
{Object.keys(ClientPdfs).map((ageName, i) => (
    <Card
      onClick={() => setGenreObject(ClientPdfs[ageName])}
      key={i}>
    {!genreObject && (
      <CategoryContainer>
      <Overlay />
      <CategoryPhoto src={ClientPdfs[ageName].image} alt="ages"/>
      <CategoryName>
        {ClientPdfs[ageName].name}
      </CategoryName>
      </CategoryContainer>
    )}
    </Card>
  ))}
</CardContainer>