React ボタン押下により数値のデクリメント

Question

JavaScript/React初心者です。
[購入]ボタンを押下されたら、{product.qty}を-1デクリメントする処理を追加したいです。
初心者のため、どこから手をつけるのかでつまづいております。
考える手順をアドバイス頂けますと幸いです。

（テストのため不要な削除ボタン等が表示されております）

const React = require('react')
const DefaultLayout = require('./layouts/Default');
class Index extends React.Component {
  render(){
    const products = this.props.products;
    return (
      <DefaultLayout title={"Shop Page"} styles={[{key: 0, href: '/css/app.css'}, { key: 1, href: '/css/indexpage.css'}]}>
        <h1></h1>
        <ul>
          {
            products.map((product)=>{
              return(
                <li key={product._id} id="column">
                                  <a href={`/products/${product._id}`}><font color="silver">{product.name}{product.description}</font></a>
                                  <form method="POST" action={`/products/${product._id}?_method=DELETE`}>
                                  <img src={product.img} width="295px" height="393px" ></img>
                                  <input type="submit" value="DELETE"/>
                                  <br />
                                  <font color="silver">In stock: {product.qty}</font>
                                  <input type="submit" value="購入"/>
                  </form>
                  <a href={`/products/${product._id}/edit`}><font color="silver">Edit This Product</font></a>
                                </li>
              )
            })
          }
        </ul>      </DefaultLayout>
    )
  }
}

module.exports = Index;

Answer 1

細かい部分はご自身で考えるのが良いかと思うので、大まかな流れとしては

1. [購入]ボタンがクリックされたことを検知する。
2. 親コンポーネントへ"購入"されたことを伝える
3. 親コンポーネントでデクリメント

(4. propsで渡しているので自動で更新される)
リストですかね。

###1. [購入]ボタンがクリックされたことを検知する
イベントのスタート地点。
inputにはonClickが用意されているので、クリック時に実行される関数を用意してこのonClickに渡しましょう。

###2. 親コンポーネントへ"購入"されたことを伝える
propsは渡された側では変更できないため、変更してほしいと親コンポーネントへ伝えます。
しかし、子から親へのアクションは基本できません。
方法としては親で購入された際の関数を作成し、その関数を子にpropsとして渡します。
そして、子では渡された関数を1のonClick時に呼んであげればいいですね。
ただし、どの商品が購入されたのか判断ができる材料がないといけないので、そのあたりどのように判断するかは今一度検討してみるとよいかと。

###3. 親コンポーネントでデクリメント
2で子に渡している関数ですね。
productsの形式によっても処理が変わるので詳しい内容は省略。
親のstateとしてproducts持っていると思うので、対象商品の数をデクリメントしてsetStateしてやるだけ。