title: MERN - delete item/row in React Data Table Component
body: <p>I have a MERN stack application that is modified from a great <a href="https://www.youtube.com/watch?v=KyWaXA_NvT0&amp;t=2815s" rel="nofollow noreferrer">tutorial</a> I completed. In the original app, transactions were rendered in a list populated from an API call to Mongo Atlas DB. I converted the list to a react-data-table-component and am now trying to figure out how to delete a table row/transaction. The original app had this as part of the transaction component with an onClick button. When I attempt to use the deleteTransaction function, I receive a "TypeError: Cannot read property '_id' of undefined". I can see that the data table renders via the object {transactions}, but cannot figure out why it does not recognize the _id. </p>
  
  <p>Other info: state is managed through the React Context API, with a Router.js and Reducer.js.  </p>
  
  <p><strong>TransactionTable.js</strong></p>
  
  <pre><code>import React, { useContext, useEffect } from "react";
  
  // Data table imports
  import IconButton from "@material-ui/core/IconButton";
  import DeleteIcon from "@material-ui/icons/Delete";
  import Card from "@material-ui/core/Card";
  import DataTable from "react-data-table-component";
  
  // import transaction component and context provider
  import { GlobalContext } from "../context/GlobalState";
  
  // create data table component
  export const TransactionTable = () =&gt; {
    const { transactions, getTransactions, deleteTransaction } = useContext(
      GlobalContext
    );
  
    // react-data-table-component Columns for back-end data
    const columns = [
      {
        name: "Transaction",
        selector: "text",
        sortable: true
      },
      {
        name: "Amount",
        selector: "amount",
        sortable: true,
  
        // conditionally render amount if positive or negative
        conditionalCellStyles: [
          {
            when: row =&gt; row.amount &gt; 0,
            style: {
              color: "green"
            }
          },
          {
            when: row =&gt; row.amount &lt; 0,
            style: {
              color: "red"
            }
          }
        ]
          },
          {
  // where I'm attempting to pass the transactions prop and apply the deleteTransaction function 
  // using the delete button that renders in each row
            cell: ({ transactions }) =&gt; (
              &lt;IconButton
                aria-label="delete"
                color="secondary"
                onClick={() =&gt; deleteTransaction(transactions._id)}
              &gt;  
                &lt;DeleteIcon /&gt;
              &lt;/IconButton&gt;
            )
          }
        ];
  
        useEffect(() =&gt; {
          getTransactions();
          // eslint-disable-next-line react-hooks/exhaustive-deps
        }, []);
  
        return (
          &lt;div&gt;
          &lt;Card style={{ height: "100%" }} p={2} mx="auto"&gt;
              &lt;DataTable
                title="Transactions"
                columns={columns}
                data={transactions}
                defaultSortField="Transactions"
                //actions={actions}
                pagination={true}
                highlightOnHover={true}
                dense={true}
              /&gt;
            &lt;/Card&gt;
          &lt;/div&gt;
        );
      };
  </code></pre>
  
  <p><strong>./controllers/transactions.js</strong> - this is where the deleteTransaction function is</p>
  
  <pre><code>const Transaction = require('../models/Transaction');
  
  // @desc    Get all transactions
  // @route   GET /api/v1/transactions
  // @access  Public
  exports.getTransactions = async (req, res, next) =&gt; {
    try {
      const transactions = await Transaction.find();
      //const result = result.transaction.toString()
  
      return res.status(200).json({
        success: true,
        count: transactions.length,
        data: transactions
      });
    } catch (err) {
      return res.status(500).json({
        success: false,
        error: 'Server Error'
      });
    }
  }
  
  // @desc    Add transaction
  // @route   POST /api/v1/transactions
  // @access  Public
  exports.addTransaction = async (req, res, next) =&gt; {
    try {
      const { text, amount } = req.body;
  
      const transaction = await Transaction.create(req.body);
  
      return res.status(201).json({
        success: true,
        data: transaction
      }); 
    } catch (err) {
      if(err.name === 'ValidationError') {
        const messages = Object.values(err.errors).map(val =&gt; val.message);
  
        return res.status(400).json({
          success: false,
          error: messages
        });
      } else {
        return res.status(500).json({
          success: false,
          error: 'Server Error'
        });
      }
    }
  }
  
  // @desc    Delete transaction
  // @route   DELETE /api/v1/transactions/:id
  // @access  Public
  exports.deleteTransaction = async (req, res, next) =&gt; {
    try {
      const transaction = await Transaction.findById(req.params.id);
  
      if(!transaction) {
        return res.status(404).json({
          success: false,
          error: 'No transaction found'
        });
      }
  
      await transaction.remove();
  
      return res.status(200).json({
        success: true,
        data: {}
      });
  
    } catch (err) {
      return res.status(500).json({
        success: false,
        error: 'Server Error'
      });
    }
  }
  </code></pre>