React Jsx内での引数の渡し方

Question

Reactで複数あるボタンの一つを押したときそのボタンが持つvalue要素をonClickイベントの中に設定した関数の引数として引き渡したいです。

実装したい機能はボタンを複数用意し、ユーザーによってクリックされたボタンに表示しているテキストの内容を変更、またその後の処理のために何らかの属性（name, value等）の値をtrueからfalseまたはfalseからtrueに変更したいです

class App extends React.Component{

constructor(props){
        super(props);
        this.state = {
            value: 0,
        }

nextEvent = (num) =>{
         console.log(num + "番目のボタンがクリックされました")
}

render(){
   return(
      <div>
         <button type="button" value{*この値を引数にしたい*}="1" onClick=(()=>{nextEvent(引数)})>1</button>
         <button type="button" value{*この値を引数にしたい*}="2" onClick=(()=>{nextEvent(引数)})>2</button>
      </div>
)}
}

上記のような場合　”引数”　の場所にはどのように記述をすればいいのでしょうか？

通常のJavascriptの場合 thisでbutton全体を、またはthis.valueで引き渡すことできると認識しているのですが、今回コンポーネントの中にあるため、this.valueを使ってしまうとコンストラクタの中で設定した値が読み取られてしまいます。
thisを使用した場合はundefinedと表示されました。

試行錯誤の結果、button一つ一つにIdを振り分け、document.getElementById(id).valueとすることで取り出すことができましたがこの場合idごとに記述をする必要があり、とても長いコードになってしまいます。

実装したい機能に対しての違う形でのアプローチもあれば教えていただきたいのですが、おそらく今後もコンストラクタの中で設定した値以外を引数として渡したい場合が出てくると思うのでその方法を教えていただきたいです。

また今回プログラムを製作中にbuttonタグの中のvalueの値を数字の1として設定しようと思ったのですがなぜか文字列の"1"しか登録することができませんでした。buttonタグの何かの属性で数値のまま登録できるものがあれば教えてください。

独学で勉強を始めたばかりなので意味のないことや意味の分からないことをしているかもしれませんが、その点に関しても指摘していただけると嬉しいです

Answer 1

実装したい機能に対しての違う形でのアプローチもあれば教えていただきたいのですが

イベントオブジェクトを拾って、そこから回収しましょう。

nextEvent = (e) =>{
         console.log(e.target.value + "番目のボタンがクリックされました")
}

render(){
   return(
      <div>
         <button type="button" value{*この値を引数にしたい*}="1" onClick={nextEvent}>1</button>
         <button type="button" value{*この値を引数にしたい*}="2" onClick={nextEvent}>2</button>
      </div>
)}