Найдено x элементов с неуникальным идентификатором #typeBook (пример) REACTJS API REST

Question

У меня проблема: на этой странице отображаются следующие покупки книг. Когда пользователь покупает его, он нажимает кнопку «bought», открывается окно, и он может добавить больше информации о книге. Итак, с помощью функции handleSubmit я отправляю на задний план идентификатор книги и информацию для добавления в базу данных. Тем не менее, он всегда изменяет первую книгу в списке следующих покупок и не обнаруживает хороший идентификатор, связанный с книгой, выбранной пользователем. что я могу изменить / добавить в свой код, чтобы различать каждый идентификатор с помощью кнопки «bought»? Проблема в функции map (названия и авторы книг правильно отображаются в таблице)

Вот мой код:

import React, { Fragment } from "react";
import { MDBBtn, MDBTableBody, MDBTableHead, MDBTable, MDBModal, MDBModalHeader, MDBModalBody,MDBModalFooter,} from "mdbreact";
import './mesProchainsAchats.css';
import axios from 'axios';

class NextPurchasePage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      purchases: null,
      year: null,
      date: null,
      edition: null,
      typeBook: null,
      modal: false,
      id: '',
      error: '',
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }

toggle = () => {
  this.setState({
    modal: !this.state.modal
  });
}


change = e => {
  this.setState({
    [e.target.id]: e.target.value,
    });
}

handleSubmit = (id, year, date, edition, typeBook) => e => {
  let formData = new FormData();
  formData.append("id",id);
  formData.append("year",year);
  formData.append("date",date);
  formData.append("edition",edition);
  formData.append("typeBook",typeBook);
  const url = "http://localhost:8888/transfert_livre/transfert_prochain_achat.php"
  axios.post(url, formData)

  .then(function(response){
    console.log(response.status, response)
    alert('Livre transféré dans votre bibliothèque');
  })

  .catch((error)=>{
    console.log(error)
    if (error.response.status === 403){
      console.log(error);
      alert('Echec du transfert');
    }
  });

  setTimeout(() => {
    this.setState({
      error: '',
    });
  }, 2000);

  e.preventDefault();
}


async componentDidMount() {
    const url = "http://localhost:8888/liste_prochains_achats/liste.php";
    const response = await fetch(url);
    const data = await response.json();
    this.setState({purchases: data.results.livres, loading: false})
    console.log(data.results.livres);
  }

render() {
    if(this.state.loading){
        return <div>chargement...</div>;
    }

    return (
        <div>

          <MDBTable hover bordered scrollY maxHeight="350px">
            <MDBTableHead>
              <tr>
              <th>Title</th>
              <th>Author</th>
              <th></th>
              </tr>
            </MDBTableHead>
            <MDBTableBody>
              {
                this.state.purchases.map(book => (
                  <tr key={book.id} onChange={this.Change}>
                    <td>{book.title}</td>
                    <td>{book.author}</td>
                    <td><MDBBtn onClick={this.toggle} color="dark">Bought</MDBBtn>
                      <MDBModal isOpen={this.state.modal} toggle={this.toggle}>
                        <MDBModalHeader toggle={this.toggle}>Adding information</MDBModalHeader>
                        <MDBModalBody>
                            <label htmlFor="year" className="grey-text">
                          Année de sortie
                        </label>
                        <input
                          type="number"
                          id="year"
                          className="form-control"
                          placeholder="Année"
                          onChange={this.change}
                          required
                        />

                        <br />

                        <label htmlFor="date" className="grey-text">
                          Date d&apos;achat
                        </label>
                        <input
                          type="date"
                          id="date"
                          placeholder="jj/mm/aa"
                          className="form-control"
                          onChange={this.change}
                          required
                        />

                        <br />

                        <label htmlFor="edition" className="grey-text">
                          Edition
                        </label>
                        <input
                          type="text"
                          id="edition"
                          placeholder="Edition"
                          className="form-control"
                          onChange={this.change}
                          required
                        />

                        <br />

                        <label htmlFor="typeBook" className="grey-text">
                          Type
                        </label>
                        <input
                          type="text"
                          id="typeBook"
                          placeholder="Type"
                          className="form-control"
                          onChange={this.change}
                          required
                        />
                        </MDBModalBody>
                        <MDBModalFooter>
                          <MDBBtn color="danger" onClick={this.toggle}>Cancel</MDBBtn>
                          <MDBBtn onClick={this.handleSubmit(book.id, this.state.year, this.state.date, this.state.edition, this.state.typeBook)} color="dark">Validate</MDBBtn>
                        </MDBModalFooter>
                      </MDBModal>
                    </td>
                  </tr>
                ))
              }
            </MDBTableBody>
          </MDBTable>
        </div>
      );
    }
}

export default NextPurchasePage;