React：Meterial-UIを使ったクリック処理

Question

仕事の都合でReactを初めまして、Material-UIの使い方がよく分かっておりません、、
やりたいこととしては、SNSの「いいねボタン」に似たものを作ることです。

MaterialUIのサイトから持ってきたハートアイコンを使おうと思います。
それをボタンとしての役割にする方法が分からず質問です。

実際に書いたコード

最初は

import React, { Component } from 'react';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

class Sns extends Component {
  render() {
    return(
        <FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/>
    );
  }
}

でしたが、当然ただアイコンが表示されただけでしたので、buttonタグで囲みました。

import React, { Component } from 'react';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';

class Sns extends Component {
  render() {
    return(
        <button><FavoriteBorderIcon onClick = {() => this.props.SnsPost()}/></button>
    );
  }
}

この実行結果が以下の写真となります（左のゴミ箱マークは今回は質問対象外です）

実現したいこと

ハートアイコンそのものをボタンとして機能させること

buttonタグを使うと、ハートアイコンはボタンとして処理できるのですが、これをハートアイコンだけにするにはどうすれば良いでしょうか（ハートを囲っているグレー部分を無くす）

これを押すと右側にいいねの数をカウントしていきたいと思っています。

補足

※stateはApp.jsで保持しており、

onClick = {() => this.props.SnsPost()}

の

SnsPost()

はApp.jsファイルで定義します。

また、Firebaseやreduxなどは使用しません。

ご存知の方がいらっしゃいましたら、ご教示いただけますと幸いです。
よろしくお願いいたします。

解決したコード

回答いただいたbuttonタグにonClick処理を書き込みました。

一度失敗した例

<button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></button>

これだと変わらずグレーの四角に囲まれたままでした。

Buttonで解決しました。

import { Button } from '@material-ui/core';

<Button onClick = {() => this.props.SnsPost()}><FavoriteBorderIcon /></Button>
コード

左のゴミ箱マークはただのアイコンなので少し位置がずれていますが、マウスを当てたらグレーがかります。
マウスあてる前↓

マウスあてた時↓

Answer 1

こんにちは。ベストアンサー決定後に失礼します。

IconButton を使うとよいかと思います。

• 動作確認用サンプル： https://codesandbox.io/s/q283517-m8nw9

Comments

[gomasan]

わぁありがとうございます...! IconButtonというものもあるんですね。見た目がとても綺麗です。コードも作っていただきありがとうございます。いただいたIconButtonのやり方でやってみます。本当にありがとうございます。

Answer 2

buttonタグにonClickを設定する形だと意図通りではないでしょうか？

Comments

[gomasan]

ありがとうございます！できました！！
一応書いたコードも追記します。ありがとうございます。