Reactで条件によって表示を切り替える

Reactで条件によって表示内容を切り替える方法をメモ。

サンプルコード

例として、一覧表示をレイアウト切り替えボタンでリストとカードに切り替えられる想定を試してみます。
まずはLayout.jsxです。

import { useState } from 'react'
import List from './List.jsx'

function Layout() {
  const [layoutType, setLayoutType] = useState('list');
  function handleLayoutClick() {
    if(layoutType === 'list') {
      setLayoutType('card');
    } else {
      setLayoutType('list');
    }
  }

  return (
    <>
      <button onClick={handleLayoutClick}>レイアウト切り替え</button>
      <List layoutType={layoutType} />
    </>
  )
}

export default Layout

ボタンとListのコンポーネントを配置して、ボタンをクリックするとlayoutTypeの中身をlistとcardで切り替えるようにしています。

次にList.jsxで、propsから渡ってきたlayoutTypeの値に応じて出し分けを行います。

function List({ layoutType }) {
  if(layoutType === 'list') {
    return <p>list</p>;
  } else {
    return <p>card</p>;
  }
}

export default List

これでボタンクリック(条件の切り替え)に応じて表示を切り替えることができました。
if文で表示切替のデモページ

nullを返すことで、何も表示しないようにすることもできます。
例として、初期表示は何も表示しないようにしてみます。

import { useState } from 'react'
import List from './List.jsx'

function Layout() {
  const [layoutType, setLayoutType] = useState('none');
  function handleLayoutClick() {
    if(layoutType === 'none') {
      setLayoutType('list');
    } else if(layoutType === 'list') {
      setLayoutType('card');
    } else {
      setLayoutType('list');
    }
  }

  return (
    <>
      <button onClick={handleLayoutClick}>レイアウト切り替え</button>
      <List layoutType={layoutType} />
    </>
  )
}

export default Layout

初期表示時はlayoutTypeをnoneとなるようにしました。
次にList.jsxで、layoutTypeがnoneの場合にはnullを返すようにしてみます。

function List({ layoutType }) {
  if(layoutType === 'none') {
    return null;
  } else if(layoutType === 'list') {
    return <p>list</p>;
  } else {
    return <p>card</p>;
  }
}

export default List

これで初期表示時は何も表示しないようにできました。
nullを返す場合のデモページ

最後に、三項演算子を使って切り替える形を試してみます。
Layout.jsxは最初と同じ状態です。

import { useState } from 'react'
import List from './List.jsx'

function Layout() {
  const [layoutType, setLayoutType] = useState('list');
  function handleLayoutClick() {
    if(layoutType === 'list') {
      setLayoutType('card');
    } else {
      setLayoutType('list');
    }
  }

  return (
    <>
      <button onClick={handleLayoutClick}>レイアウト切り替え</button>
      <List layoutType={layoutType} />
    </>
  )
}

export default Layout

List.jsx内で三項演算子を使って条件分岐を行います。

function List({ layoutType }) {
  return (
    <>
      {layoutType === 'list' ? <p>list</p> : <p>card</p>}
    </>
  )
}

export default List

結果としては最初のデモと同じ動作になります。
三項演算子を使う場合のデモページ