Eslint-plugin-react: eslint showing error when using variable from parent scope

[afucher]

Tell us about your environment

• ESLint Version: 6.0.1
• Node Version: v10.15.3
• npm Version: 6.4.1

What parser (default, Babel-ESLint, etc.) are you using?
default
Please show your full configuration:

Configuration

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

import React from 'react';

interface Props {
    readonly history: number[];
}

export const MyHistory = (props: Props) => {
    const renderContent = () => {
        if (props.history.length > 0) {
            return <div> My history here</div>
        }
        return <div> No historical events</div>
    };

    return renderContent();
};

npm run eslint --fix --ext .tsx --ext .ts src

What did you expect to happen?
eslint show no errors

What actually happened? Please include the actual, raw output from ESLint.

  9:19  error  'history' is missing in props validation         react/prop-types
  9:27  error  'history.length' is missing in props validation  react/prop-types

Additional info: issue first created on eslint repo https://github.com/eslint/eslint/issues/12004

[ljharb]

renderContent is being detected as a component; but either way you should be destructuring props directly inside your component, not later.

[afucher]

@ljharb, you mean like this?

import React from 'react';

interface Props {
    readonly history: number[];
}

export const MyHistory = (props: Props) => {
    let history: number[] = props.history;
    const renderContent = () => {
        if (history.length > 0) {
            return <div> My history here</div>
        }
        return <div> No historical events</div>
    };

    return renderContent();
};

If yes, I'm still getting error:

  10:21  error  'history.length' is missing in props validation  react/prop-types

[ljharb]

gotcha, in that case it seems like a bug.

[vjdv]

i'm having a likely issue

I have following component:

// eslint-disable-next-line
function DayDiv({ today, selection, active, picked, d, daySelecter }) {
  const selected = active && selection.getDate() === d;
  const today_flg = active && dayEquals(today, setDateFor(selection, d));
  return (
    <div className={cx("day", active && "active", picked && "picked", selected && "selected", today_flg && "today")} data-value={d} onClick={daySelecter}>
      {d}
    </div>
  );
}

is warning
'selection.getMonth' is missing in props validation react/prop-types

DayDiv is used only on a Calendar component, Calendar is exported, DayDiv is not, that's why the _eslint-disable-next-line line_, before updating this warning was not appearing

[ljharb]

Even not exported, it needs propTypes; separately, you’d need the disable at each prop’s usage site as well (when a property is accessed off of it)

[vjdv]

yeah, but the prop is _selection_, which warning was disabled in line 1, why now the attributes of the props are evaluated too?

[ljharb]

Because a recent update improved prop detection. Prop shapes should be typed too.

[modestfake]

Is there a way to opt-out from nested props validation? It's so annoying to have this error for list.length, list.map(), list.filter, something.toString(), etc. Why should I validate built-in JavaScript methods and properties?

[ljharb]

If it’s typed as an array, array methods should just work. Is it?

[denisbabineau]

+1 running into this as well with nested scope:

const Comp = () => (<Formik render={props => (<>{props.status}</>)} />);

Complains that status is missing in props validation for Comp but it doesn't belong to it.

It looks like it's just looking for the textual name props and not analyzing the AST properly because if I rename to props2 the lint goes away.

[jzabala]

This one is fixed too with #2699