NextJS、Reactで関数を引数に機能の違うボタンを作成する方法

同じ見た目のボタンで機能だけ変えたい

NextJSで同じ見た目のボタンだけど機能と中のテキストだけ変更したいという場面があったのでその方法をご紹介していきたいと思います！

import React, { useContext, VFC } from 'react'

type Prop = {
  testFunc: () => void
}

const Test: VFC<Prop> = (props) => {
  let { startFunc } = props
  return (
    <>
      <div className={"btn"} onClick={() => testFunc()}>
        <p className={"text"}>Start</p>
      </div>
    </>
  )
}

export default Test;

これで、使うときは

<Test testFunc={someFunc} />

インポートしてこの様に呼び出していただければOKです！

随時必要な機能を追加したいときも簡単に追加できますね！

今回私はNextJSの環境で実行しましたがReactでもできるはずです！

何かあればコメントまで。