Eslint-plugin-react: `react/display-name` and `react/prop-types` are incorrectly reported in `react-table`

[garyking]

For this component:

import React from 'react';
import ReactTable from 'react-table';

import 'react-table/react-table.css';

function Test() {
  const data = [
    {
      name: 'Bob',
    },
  ];

  const columns = [
    {
      Header: 'Name',
      accessor: 'name',
      Cell: ({ value }) => <div>{value}</div>,
    },
  ];

  return <ReactTable columns={columns} data={data} />;
}

export default Test;

The line: Cell: ({ value }) => <div>{value}</div>, incorrectly reports the following two errors:

Component definition is missing display name. eslint(react/display-name)
'value' is missing in props validation. eslint(react/prop-types)

These two errors should not appear. There are, correctly, no errors, when the above code is converted to a class:

import React from 'react';
import ReactTable from 'react-table';

import 'react-table/react-table.css';

class Test {
  render() {
    const data = [
      {
        name: 'Bob',
      },
    ];

    const columns = [
      {
        Header: 'Name',
        accessor: 'name',
        Cell: ({ value }) => <div>{value}</div>,
      },
    ];

    return <ReactTable columns={columns} data={data} />;
  }
}

export default Test;

Otherwise, is there a way I can avoid these errors, without disabling the rules?

[ljharb]

That's because it's a component. It should be warned on both of those rules.

The bug, in fact, is that it's not warned in a class.

[garyking]

Okay. Should I keep this issue open until both rules are fixed for within classes?
Here is my config for both rules:

{
  "react/display-name": [
    "error",
    {
      "ignoreTranspilerName": false
    }
  ],

  "react/prop-types": [
    "error",
    {
      "ignore": [],
      "customValidators": [],
      "skipUndeclared": false
    }
  ]
}

Is the only way to resolve both rules, is to pull out the component and assign it to a variable, then assign that variable to the object key, so that the display name is automatically inferred from the variable name, and then I can assign prop types to it like I normally would?

[ljharb]

No, you can use a normal named function instead of an arrow - components shouldn’t be arrow functions, ideally.

[garyking]

I tried the following, and it did indeed resolve display-name, but not prop-types:

import PropTypes from 'prop-types';
import React from 'react';
import ReactTable from 'react-table';

import 'react-table/react-table.css';

function Test() {
  const data = [
    {
      name: 'Bob',
    },
  ];

  const columns = [
    {
      Header: 'Name',
      accessor: 'name',
      Cell({ value }) {
        return <div>{value}</div>;
      },
    },
  ];

  columns[0].Cell.propTypes = {
    value: PropTypes.string.isRequired,
  };

  return <ReactTable columns={columns} data={data} />;
}

export default Test;

[ljharb]

True - for that you’d have to extract it to a separate variable and add .propTypes.