hookを使ったMaterialUIのハートアイコンのON・OFF

1681 ワード
React material-ui React テキストリンク

　MaterialUIを使って、ハートアイコン（MaterialUI的にはFavoriteIcon）を
実装したいときに色々悩んだので書きます。

結論

完成品

コード

import { React, useState } from "react";
import { IconButton } from "@material-ui/core";
import FavoriteIcon from "@material-ui/icons/Favorite";
import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";


const Demo = () => {

//ハートの状態を管理するfavoを定義(初期値はfalse)
  const [favo, setFavo] = useState(false);

//アイコンをクリックしたらfavoのtrueとfalseが切り替わる関数を作成
const handleClick = () => {
  if (favo === false) {
      setFavo(true);
    } else {
      setFavo(false);
    }
  };

//trueなら<FavoriteBorderIcon  />をfalseなら<FavoriteIcon color={"secondary"} />を描画
return(
 <>
      <IconButton
        onClick={() => handleClick()}
      >
        {favo ? <FavoriteIcon color={"secondary"} /> : <FavoriteBorderIcon />}
      </IconButton>
　</>
)
}
export default Demo

ハートの色を白から赤に変えるために
FavoriteIconにはcolor={"secondary"}を与えている。

感想

可読性はあんまり良くないです。
もっといい方法知っている方は教えていただけると助かります！