【React】ボタンをクリックして文字を切り替える

React学習のために簡単なことを実装します。

完成形

コード

App.jsx

export const App = () =>{

  //stateの定義
  const [switchIcon,setSwitchIcon] = useState(true);

  const toggleButton = () => {
    setSwitchIcon(!switchIcon);
  }

  return (
    <>
      <SwitchButton toggleButton={toggleButton} switchIcon={switchIcon}/>
    </>
  );
};

SwitchButton.jsx

export const SwitchButton = (props) => {
  const {toggleButton,switchIcon} = props;
  return(
    <div>
      <button onClick={toggleButton}>切り替え</button>
      <p>{DisplayTypeMessage(switchIcon)}</p>
    </div>
  );
}

const DisplayTypeMessage = (isList) => {
  return isList ? "a" : "b";
}