JSXでif文を使う

import React, {useState} from 'react';

export function App(props) {
  const [isTextVisible, setIsTextVisible] = useState(false);
  const handleClick = () => {
    setIsTextVisible(!isTextVisible)
  }
  
  return (
    <div className='App'>
    <button onClick={handleClick}>click</button>
    {(() => {
      if (isTextVisible) {
        return <div>text</div>
      }
    })()}
    </div>
  );
}

と書くとJSXでif文を使えます。

() => {
      if (isTextVisible) {
        return <div>text</div>
      }
}

という関数を定義して、その定義した関数を()で括り、その後ろに()と書くことで定義した関数が実行されます。
動くコードはこちらです。