Skip to content

react/no-unused-prop-types cannot find props being used inside helper functions #1135

@renanvalentin

Description

@renanvalentin
const showAlert = props => **props.status** === PENDING;

const Alert = (props) => {
  if (showAlert(props)) {
    return (
      <div />
    );
  }

  return <noscript/>;
};

Alert.propTypes = {
  **status**: PropTypes.oneOf([PENDING, ACCEPTED, CANCELED])
};

In this case props.status is being used inside of the function showAlert.

Activity

ljharb

ljharb commented on Mar 31, 2017

@ljharb
Member

The proper way to handle this is not to pass the entire props object around. It's not practical or often possible for the plugin to follow references, and the only thing that should get a props object is an element.

In other words, pull status out prior to passing it to the function.

MethodenMann

MethodenMann commented on Apr 3, 2017

@MethodenMann

ok i dont have exactly the same situation. This is my simplified component:

import React from 'react'

const MyComp = props => {
  const locales = ['de', 'en']

  const handleFlagClick = locale => {
    props.onLocaleChange(locale)
  }
  return (
    <div>
      {
        locales.map(locale => (
          <img
            key={locale}
            onClick={() => handleFlagClick(locale)}
          />
        ))
      }
    </div>
  )
}

MyComp.propTypes = {
  onLocaleChange: React.PropTypes.func
}

export default MyComp

And i get the following linting error:

24:19 error 'onLocaleChange' PropType is defined but prop is never used react/no-unused-prop-types

I figured out its because of the map. It this by design?

jseminck

jseminck commented on May 24, 2017

@jseminck
Contributor

Hello,

I ran your latest test case in a PR where we fixed the following issue: #1183 - and in there the test case passed! Prior to the changes from that specific PR, the test case was failing.

Removing the .map() code in the render() would make the component valid under the current implementation.

So I am quite confident those changes are also fixing the issue that you see here. And yes I would think that this to be a bug. Do others agree?

42 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @ljharb@renanvalentin@MethodenMann@jseminck

      Issue actions

        react/no-unused-prop-types cannot find props being used inside helper functions · Issue #1135 · jsx-eslint/eslint-plugin-react