Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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?

Issue Analytics

State:
Created 4 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

6reactions

garykingcommented, Sep 8, 2019

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;

3reactions

ljharbcommented, Sep 8, 2019

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