How can I make a component "display: none" until the user has made their selection?

Question

Working in react and I'm trying to get my component to NOT show up until a selection is made. Once that selection is made, I need other styling to be put in place as follows:

<p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>

Until the selection goes through I don't want anything to show; as of now, while player is undefined that conditional still runs and I get an empty border.

Are there any quick tricks I can use to check whether a player object is undefined and render nothing, and THEN render the way I'd like it to once a selection is made?

Answer 1

You can check for player:

{player && <p className={player.weight >= opponent.weight ? "text-green border-green" : "text-danger border-danger"}>{player.weight}</p>}

This syntax variable && something is equivalent to if(variable){ something }

So if variable is a falsy value like null, undefined, 0, then something is not executed.

It is a well suited syntax for conditional rendering in React