Warning/Error : “Found x elements with non-unique id” REACTJS API REST

Question

I want to do a form with the values corresponding of each book (with the id which is associate to), but the console write this warning "Found x(number of books) elements with non-unique id". So, it's written the informations of the same book everywhere, because the id isn't recognized. What can I change/add in my code please? Here is my return:

return (
    <div>
      <MDBTable hover>
        <MDBTableHead>
          <tr>
            <th>Titre</th>
            <th>Auteur</th>
            <th>Année de sortie</th>
            <th>Edition</th>
            <th>Type</th>
            <th>Statut</th>
            <th>Date d'achat</th>
            <th></th>
          </tr>
        </MDBTableHead>
        <MDBTableBody>
          {
            this.state.books.map(livre => (
              <tr key={livre.id} onChange={this.Change} >
                <td>{livre.title} </td>
                <td>{livre.author}</td>
                <td>{livre.year}</td>
                <td>{livre.edition}</td>
                <td>{livre.typeBook}</td>
                <td>{livre.status}</td>
                <td>{livre.date}</td>
                <td><MDBBtn color="dark" onClick={this.toggle(8)}>Edit</MDBBtn>
                      <MDBModal isOpen={this.state.modal8} toggle={this.toggle(8)} fullHeight position="top">
                        <MDBModalHeader toggle={this.toggle(8)}>{livre.title}</MDBModalHeader>
                        <MDBModalBody>
                        <div className="grey-text">
                    <label htmlFor="title" className="grey-text">
                      Titre
                    </label>
                    <input
                      type="text"
                      id="title"
                      placeholder={livre.title}
                      className="form-control"
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="author" className="grey-text">
                      Auteur
                    </label>
                    <input
                      type="text"
                      id="author"
                      placeholder={livre.author}
                      className="form-control"
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="year" className="grey-text">
                      Année de sortie
                    </label>
                    <input
                      type="number"
                      id="year"
                      className={"form-control"}
                      placeholder={livre.year}
                      onChange={this.change}
                    />

                    <br />

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

                    <br />

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

                    <br />

                    <label htmlFor="typeBook" className="grey-text">
                      Type
                    </label>
                    <input
                      type="text"
                      id="typeBook"
                      placeholder={livre.typeBook}
                      className="form-control"
                      onChange={this.change}
                    />

                    <br />

                    <label htmlFor="status" className="grey-text">
                      Statut
                    </label>
                    <input
                      type="text"
                      id="status"
                      placeholder={livre.status}
                      className="form-control"
                      onChange={this.change}
                    />


                  </div>
                        </MDBModalBody>
                        <MDBModalFooter>
                          <MDBBtn color="danger" onClick={this.toggle(8)}>Annuler</MDBBtn>
                          <MDBBtn color="dark">Enregistrer</MDBBtn>
                        </MDBModalFooter>
                      </MDBModal>               
                </td>

              </tr>
            ))
          }
        </MDBTableBody>
      </MDBTable>

    </div>
  );
}

Answer 1

In your map you're creating elements with id s on them. You should be making those id s unique somehow. Where ever an element is given an id , that id must be unique or you'll have problems with apis that rely on them.

Open find, type in id=" and you should be able to see them. Since they're in a map , for every element of the array you're generating an element with the same id.

It's probably as easy as appending the index to the id or just omitting it unless you have a specific use for it.