react/display-name false negative when component body has function call with inline object as argument

[berrtech]

Eslint and plugin versions:

"eslint": "7.32.0",
"eslint-plugin-react": "^7.27.0",

Relevant eslint configuration:

"react/display-name": "error",

Expected error:

Component definition is missing display name  react/display-name

As described in the title, the following code does not produce error:

const processData = (options?: { value: string }) =>
  options?.value || 'no data';

export const Component = observer(() => {
  const data = processData({ value: 'data' });
  return <Text>{data}</Text>;
});

If I remove { value: 'data' } argument, error is produced, as expected:

const processData = (options?: { value: string }) =>
  options?.value || 'no data';

export const Component = observer(() => {
  const data = processData();
  return <Text>{data}</Text>;
});

If I extract this argument to a separate variable error is produced too:

const processData = (options?: { value: string }) =>
  options?.value || 'no data';

export const Component = observer(() => {
  const options = { value: 'data' };
  const data = processData(options);
  return <Text>{data}</Text>;
});

That's weird, I don't think there is something wrong with configuration.
Repo reproducing error: https://github.com/berrtech/eslint-react-display-name

[ljharb]

Component detection is likely being confused because we have no idea what observer is. Have you configured it in componentWrapperFunctions, as mentioned in the readme?

[berrtech]

@ljharb Yes, observer is present in componentWrapperFunctions

[ljharb]

@berrtech one thing i note in that repo - npm ls fails, which means the entire dep graph is invalid. In particular, eslint-config-airbnb@17 only works with eslint 4 and 5, so you definitely need to update the airbnb config to v18 at least.

That's not the cause of your problem, of course, but something you should fix :-)

[berrtech]

@ljharb Thanks for a quick fix! Works as expected now