JS/React ボタンのデクリメント処理の書き方

Question

JavaScript, React初心者です。

商品の一覧ページを作成して、
各商品の購入ボタンを押されたら、該当の在庫の数値を減らす処理を追加したいです。

product.qty -= 1　<- このような処理をどこかに入れるはず？　と思うのですが、
この場合のルートの書き方などアドバイス頂けますと幸いです。

各ルートの設定ファイル

require('dotenv').config()
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const Product = require('./models/product')

/*******
Database Setup
******/
const mongoose = require('mongoose');
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
  useCreateIndex: true,
  useFindAndModify: false
})
mongoose.connection.once('open', () => {
  console.log('connected to mongo')
})



app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine())
app.use((req, res, next) => {
  console.log('**********************')
  console.log('***********Middleware checking in***********')
  console.log('I run before all routes')
  console.log('**********************')
  next()
})

app.use(express.urlencoded({ extended: true })) // Without this half my code wont work because i need req.body
const methodOverride = require('method-override');
app.use(methodOverride('_method'));
app.use(express.static('public'));


/*
Index
*/
app.get('/products/', (req, res) => {
  Product.find({}, (err, foundProducts)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Index', {
        products: foundProducts
      })
    }
  })
})

/*
New
*/
app.get('/products/new', (req, res) => {
  res.render('New')
})

/*
Destroy
*/
app.delete('/products/:id', (req, res) => {
  Product.findByIdAndDelete(req.params.id, (err, foundProduct)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.redirect('/products')
    }
  })
})

/*
Update
*/
app.put('/products/:id', (req, res) => {
  Product.findByIdAndUpdate(req.params.id, req.body, { new: true }, (err, updatedProduct)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Show', {
        product: updatedProduct
      })
    }
  })
})

/*
Create
*/
app.post('/products', (req, res) =>{
  Product.create(req.body, (err, createdProduct ) => {
    if(err){
    res.status(404).send({
      msg: err.message
    })
  } else {
    console.log(createdProduct);
    res.redirect('/products')
  }
})
})

/*
Edit
*/
app.get('/products/:id/edit', (req, res) => {
  Product.findById(req.params.id, (err, foundProduct)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Edit', {
        product: foundProduct
      })
    }
  })
})

/*
Show
*/
app.get('/products/:id', (req, res) => {
  Product.findById(req.params.id, (err, foundProduct)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Show', {
        product: foundProduct
      })
    }
  })
})

/*
Buy *ココ作業中
とりあえずUpdateのルートをコピペ
product.qty -= 1　<- こんなのをどこかに入れるはず？
*/
app.put('/products/:id', (req, res) => {
  Product.findByIdAndUpdate(req.params.id, req.body, { new: true }, (err, updatedProduct)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Show', {
        product: updatedProduct
      })
    }
  })
})


app.listen(PORT, () => {
console.log('We in the building', PORT)
})

一覧ページ

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="Buy"/>
                  </form>
                  <a href={`/products/${product._id}/edit`}><font color="silver">Edit This Product</font></a>
                                </li>
              )
            })
          }
        </ul>      </DefaultLayout>
    )
  }
}

module.exports = Index;