Попробую создать кнопку удаления на столе из пожарного магазина

Question

Я создаю страницу администратора и извлекаю таблицу из Firebase, используя плагин реагирования Firestorter.Вытягивание таблицы не проблема, генерация таблицы не проблема, однако я пытаюсь создать кнопку удаления.

Я пытался создать кнопку удаления на лету, однако при загрузке страницы он пытается удалить, и onClick ничего не делает.Я не уверен на 100%, что делаю это в нужном месте, и, надеюсь, кто-то может дать мне несколько советов.Мой код ниже:

import React, {Component} from 'react';
import {Container} from 'reactstrap';
import {FileUploader} from 'react-firebase-file-uploader';
import firebase from '../components/firebase.js';
import {initFirestorter, Collection} from 'firestorter';
import {observer} from 'mobx-react';
import './Admin.css'

initFirestorter({firebase: firebase});
const promos = new Collection('promotions');
const DisplayPromotions = observer(class DisplayPromotions extends Component {
    render() {
      return  <tbody>
        {promos.docs.map((doc) => (
          <PromoItem
            key={doc.id}
            doc={doc} />
        ))}
      </tbody>;
    }
  });

  const PromoItem = observer(({doc}) => {
    const {Name, PromoText, Status} = doc.data;
    return <tr id={doc.id}>

        <td>{Name}</td>
        <td>{PromoText}</td>
        <td>{isActive(Status)}</td>
        <td><button onClick={DeletePromo(doc.id)}>Delete</button> <br/>
            Set To Inactive

        </td>
        </tr>
  });

 const DeletePromo= (promoId) =>{
    console.log("attempting to delete!");
  const ref = firebase.database().ref('promotions/' + promoId);
  ref.remove();
};
  const isActive = (status) =>{
    if(status){
        return "Active"
    }
    else{
        return "Inactive"
    }
};

export default class AdminPage extends Component{
    constructor(props){
        super(props);
        this.state = {
           // promotionalData: JSON(),
        }
   }
render(){

    return(
        <Container>
            <div>
                <label className='label'>Enter Promotional Text</label>
            </div>
            <div><input type='textarea'></input></div>
            <div>
                <label className='label'>Upload an image for your event</label>
                <div>
                    <label style={{backgroundColor: 'steelblue', color:     'white', padding: 10, borderRadius: 4, pointer: 'cursor'}} />
                </div>
                <table id="promotionTable" style={{fontSize:15}}>
          <thead>
            <tr>
              <th>Promotion Name</th>
              <th>Promotion Text</th>
              <th>Promotion Active</th>
              <th>Options</th>
            </tr>
          </thead>
      <DisplayPromotions />
    </table>
    <br/>
    <br/>
        </div>
    </Container>
)
}

}