title: ESLint: Component definition is missing displayName (react/display-name)
body: <p>I'm using a react hook component with antd. When setting up columns for a table, the render function is giving me an ESLint error:</p>
  <blockquote>
  <p>ESLint: Component definition is missing displayName
  (react/display-name)</p>
  </blockquote>
  <p>I've tried adding displayName to the object but this doesn't work.</p>
  <p>This is how the error looks:
  <a href="https://i.stack.imgur.com/dffZS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dffZS.png" alt="enter image description here" /></a></p>
  <p>This is the code:</p>
  <pre><code>const columns_payment_summary_table = [ 
      {
        title: FooConstants.LABEL_QUANTITY_SELECTED,
        dataIndex: 'group',
        key: 'group',
        render: text =&gt; (
          &lt;span&gt;{getCountForCountry(text)}&lt;/span&gt;
        ),
      }
    ]
  </code></pre>
  <p>Can anyone help?</p>
  <p>Here is full component code (well just the relevant bits)</p>
  <pre><code>import * as FooConstants from './constants'
  import {connect} from 'react-redux'
  import React, {useState, useEffect} from 'react'
  import {Card, Table} from 'antd'
  import PropTypes from 'prop-types'
  
  const propTypes = {
    foos: PropTypes.object.isRequired,
  }
  
  function Foos(props) {
  
    const [selectedFooRows, setSelectedFooRows] = useState([])
  
    useEffect(() =&gt; {
      getFooDetails()
    }, [])
  
    function getFooDetails() {
      props.dispatch({
        type: FooConstants.GET_FOO_PAYMENT_SUMMARIES,
        params: {
          'group_by': 'country_code',
          'type': FooConstants.CLAIM_FOO,
        }
      })
      props.dispatch({
        type: FooConstants.GET_FOO_PAYMENTS,
        params: {'type': FooConstants.CLAIM_FOO, }
      })
    }
  
    const columns_payment_summary_table = [
      {
        title: FooConstants.LABEL_QUANTITY_SELECTED,
        dataIndex: 'group',
        key: 'group',
        render: text =&gt; (
          &lt;span&gt;{getCountForCountry(text)}&lt;/span&gt;
        ),
      }
    ]
  
    function getCountForCountry(country_code){
      let selected_country = selectedFooRows.filter(function(row){
        return row.group === country_code
      })
  
      if(selected_country &amp;&amp; selected_country.length &gt; 0){
        return selected_country[0].ids.length
      } else {
        return 0
      }
    }
  
    return (
      &lt;div&gt;
        &lt;Card
          title={FooConstants.LABEL_FOO_SUMMARY}&gt;
          &lt;Table
            columns={columns_payment_summary_table}
            bordered={true}
            dataSource={props.foos.foo_payment_summaries}
            loading={props.foos.foo_payment_summaries_pending &amp;&amp; !props.foos.foo_payment_summaries}
            rowKey={record =&gt; record.group}
          /&gt;
        &lt;/Card&gt;
      &lt;/div&gt;
    )
  }
  
  Foos.propTypes = propTypes
  
  const mapStateToProps = (state) =&gt; {
    return {foos: state.foosReducer}
  }
  
  export default connect(
    mapStateToProps,
  )(Foos)
  </code></pre>