Can conditional rendering in React use logical operator || when rendering the same content?

Question

The code does the following - if the item selected from the dropdown menu is 'pinpong' then it will show the content within the div container content

In the second component if the item selected from the dropdown menu is 'basketball' it will also then show the div container content.

However, the content to be shown is the same. So is there a way to combine the component to be rendered with a logical operator || that will eliminate the need to be so repetitive with the code?

 
{this.props.selectedGame === 'pingpong' && (
          <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div>
     )}


{this.props.selectedGame === 'basketball' && (
          <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div>
   )}

Answer 1

What I often do in these cases where the condition for rendering gets rather long is create a function that will handle the condition and return a boolean

const shouldRenderGame = () => {
  const {selectedGame} = this.props;
  return selectedGame === "pingpong" || selectedGame === "basketball"
}

{shouldRenderGame() && (
          <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div>
     )}

Answer 2

You could use a ternary operator.

{
  this.props.selectedGame === "pingpong" ? (
    <div>
      <label>
        <p>How many games do you want to play?</p>
        <input onChange={this.handleChangeInput} type="text" />
      </label>
    </div>
  ) : (
    <div>
      <label>
        <p>How many games do you want to play?</p>
        <input onChange={this.handleChangeInput} type="text" />
      </label>
    </div>
  );
}

You can, of course, use the || operator if your div indeed is set in the same spot via

{
  (this.props.selectedGame === "pingpong" ||
    this.props.selectedGame === "basketball") && (
    <div>
      <label>
        <p>How many games do you want to play?</p>
        <input onChange={this.handleChangeInput} type="text" />
      </label>
    </div>
  );
}

To your question:

However, the content to be shown is the same. So is there a way to combine the component to be rendered with a logical operator || that will eliminate the need to be so repetitive with the code?

I don't understand why you would need to switch between components here at all if they are exactly the same. What are you trying to solve?

You mentioned this to be two selects and you just double up the showing of the same component. In that case just make the div it's own component and show it below the select:

function MyGamesInput() {
    return (
        <div>
            <label>
                <p>How many games do you want to play?</p>
                <input onChange={this.handleChangeInput} type="text" />
            </label>
        </div>
    );
}

<SelectOne/>
{
    this.props.selectedGame === "pingpong" && <MyGamesInput />
}

<SelectTwo/>
{
    this.props.selectedGame === "basketball" && <MyGamesInput />
}

Answer 3

For simple usage, you could do like this.

{this.props.selectedGame === 'pingpong' ? (
          <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div>
     ) : this.props.selectedGame === 'basketball' ? <div>
            <label>
             <p>How many games do you want to play?</p>
                    <input onChange={this.handleChangeInput} 
                    type="text"/>
             </label>
          </div> : null}