reactjs - React での条件付きレンダリングは論理演算子 || を使用できますか? 同じコンテンツをレンダリングするとき？

Question

コードは次のことを行います - ドロップダウン メニューから選択された項目が「pinpong」の場合、div コンテナー コンテンツ内のコンテンツが表示されます。

2 番目のコンポーネントでは、ドロップダウン メニューから選択された項目が「バスケットボール」の場合、div コンテナーのコンテンツも表示されます。

ただし、表示される内容は同じです。では、レンダリングされるコンポーネントを論理演算子と組み合わせて||、コードを何度も繰り返す必要をなくす方法はありますか?

 
{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>
   )}