为什么我的删除按钮在React中无法正确呈现？

Question

When I click the remove button from a particular item, it removes the last element in the list of items. I've used a pop up screen (modal) before deleting the item and after that it is not working properly. Please find below the modified code. The sample images are attached. When I press the close for rem me the last element is removed and not that element. Here is the code for the items:

<tbody>
                            {this.state.dishes ? this.state.dishes.map( (dish) =>
                                <tr class="row100 body" key={dish.id}>
                                    <td class="cell100 column2">{dish.Vendor}</td>
                                    <td class="cell100 column2">{dish.Dish}</td>
                                    <td class="cell100 column3">{dish.Price}</td>
                  <td class="cell100 column1">{dish.Days}</td>
                                    <td class="cell100 column4"><div className="test"><img className='close' onClick={this.onOpenModal} src={ require('./close.png') } />
                                    <Modal open={this.state.open} onClose={this.onCloseModal} showCloseIcon={false} center >
                                        <h2 className='modbtn'>Are you sure you want to remove this dish?</h2>
                                        <Button className="addmenu" onClick={this.remove.bind(this, dish.id)}>Yes</Button>
                                        <Button className="addmenu" onClick={this.onCloseModal}>No</Button>
                                        </Modal>
                                    </div></td>
                                </tr>) : (null) }                               
                            </tbody>

The functions can be found below:

onOpenModal = () => {
        this.setState({ open: true });
      };
      onCloseModal = () => {
        this.setState({ open: false });
      };
addMessage(e){
        e.preventDefault()

        var newData={
        Vendor: this.inputE3.value,
        Dish: this.inputEl.value,
        Price : this.inputE2.value,
        Days : this.state.days
        }

        fire.database().ref('dishes').push(newData);

      this.inputEl.value = ''; 
      this.inputE2.value = ''; 
      this.inputE3.value = ''; 
      } 
      remove(id){
        // console.log(this.state)
        let a = fire.database().ref('dishes/'+id)
        a.remove()
        this.onCloseModal()
      } 

Answer 1

Looks like issue with your function call, But you method accepts one param only.

onClick={this.remove.bind( this, dish.id )}

All Firebase database operations are asynchronous and It will be good if you handle it using promises.