React useState 状態管理

useStateを利用して状態を管理し、クリックで表示を反転させる。

import { useState } from "react";
import "./style.scss";

export const Button = (props) => {
  const [isClicked, setIsClicked] = useState(false);
  const { bgColor, children } = props;
  const OnClickFun = () => {
    console.log("クリックされたよ");
    setIsClicked(!isClicked);
  };

  const style = { backgroundColor: bgColor, color: "white" };

  return (
    <>
      <button style={style} onClick={OnClickFun}>
        {children}
      </button>
      {isClicked && <p>クリックされたら表示するテキスト</p>}
      {!isClicked && <p>閉じたよ</p>}
    </>
  );
};