title: React error - check the render method of `t`
body: <p>I switched from material-ui table to MuiDataTable for it's ease of use, but I am seeing a warning, even though the component is functioning as expected. With that said, warnings bother me.</p>
  
  <p>The following is the code for the component:</p>
  
  <pre><code>import React from "react";
  import CsvDownload from 'react-json-to-csv'
  import MUIDataTable from "mui-datatables";
  import { messageService } from "../services/order-item-service";
  
  export default class OrderItemComponent2 extends React.Component {
    state = {
      data: [],
      _columns: [],
      Header: [],
      totalCount: 10,
      options: {
        pageSize: 16,
        page: 0,
        filterType: "dropdown",
        selectableRows: false,
        responsive: "scroll",
        resizableColumns: true,
        key: ""
      }
    };
  
    componentDidMount() {
      this.subscription = messageService.getMessage().subscribe((message) =&gt; {
          let result = message;
          this.setState({ data: result.message });
          this.setState({ Header: [
            {
              name: 'order_id',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head first-col'&gt;Order Id&lt;/th&gt;
                ),
                customBodyRender: (value, i) =&gt; (
                &lt;span&gt;{ value }&lt;/span&gt;
                )
              }
            },
            {
              name: 'order_item_id',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head sec-col'&gt;Order Item&lt;/th&gt;
                )
              }
            },
            {
              name: 'product_id',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head bg-col'&gt;Prod ID&lt;/th&gt;
                )
              }
            },
            {
              name: 'code_division',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head thr-col'&gt;Div&lt;/th&gt;
                )
              }
            },
            {
              name: 'code_product',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head sm-col'&gt;Prod Code&lt;/th&gt;
                )
              }
            },
            {
              name: 'quantity_due',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head mid-col'&gt;Qty Due&lt;/th&gt;
                )
              }
            },
            {
              name: 'quantity_shipped',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head mid-col'&gt;Qty Sh&lt;/th&gt;
                )
              }
            },
            {
              name: 'price',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head sm-col'&gt;Price&lt;/th&gt;
                )
              }
            },
            {
              name: 'date_shipped',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head mid-col'&gt;Dt Sh&lt;/th&gt;
                )
              }
            },
            {
              name: 'date_due',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head mid-col'&gt;Dt Due&lt;/th&gt;
                )
              }
            },
            {
              name: 'customer_id',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head bg-col'&gt;Cust ID&lt;/th&gt;
                )
              }
            },
            {
              name: 'ship_via',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head mid-col'&gt;Ship Via&lt;/th&gt;
                )
              }
            },
            {
              name: 'value_due',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head sm-col'&gt;Val Due&lt;/th&gt;
                )
              }
            },
            {
              name: 'value_shipped',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head sm-col'&gt;Val Sh&lt;/th&gt;
                )
              }
            },
            {
              name: 'date_order',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head mid-col'&gt;Dt Or&lt;/th&gt;
                )
              }
            },
            {
              name: 'date_modified',
              options: {
                customHeadRender: () =&gt; (
                  &lt;th className='MuiTableCell-root MuiTableCell-head bg-col'&gt;Dt Mod&lt;/th&gt;
                )
              }
            }] 
          });
  
          this.setState({
            totalCount: Math.ceil(this.state.data.length / this.state.pageSize)
          });
  
      });
    }
  
    componentWillUnmount() {
      // unsubscribe to ensure no memory leaks
      this.subscription.unsubscribe();
    }
  
    getOrderItem() {
      this.setState({ data: messageService.getMessage() });
    }
  
    render() {
  
      return (
        &lt;div&gt;
          &lt;CsvDownload className='btn btn-primary' data={ this.state.data } /&gt;
  
          &lt;MUIDataTable
          title="Order Item"
          data={this.state.data}
          columns={this.state.Header}
          options={this.state.options}
        /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>As you can see, I am using the customHeadRender to make custom headers and that is when the warning first appeared. Other than that, it is functioning as expected.</p>
  
  <p><a href="https://i.stack.imgur.com/OSIjG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OSIjG.png" alt="The following is a screenshot of the warning that I am receiving"></a></p>
  
  <p>Line 33 is the first customHeadRender</p>
  
  <p>As usual, thanks in advance</p>