CODEWITHSUNDEEP
javascriptreactjseslintflowtype
gomes
gomes

Reputation: 731

eslint+ flow : 'attribute' is missing in props validation (Object with identifier)

I'm facing a weird issue today,

I have a React component which is typed with flow (a.k.a flowtype for SEO), and for some reason it shows a typing error here, here's the simplified code.

type Props = {
  someObject: { [string]: string },
};

class ComponentOne extends React.Component<Props> {
  render() {
    return (
      // No idea why there's a linting error, seems like a bug

      <div className={this.props.someObject.someKey} />
    );
  }
}

const WithEnhancements = enhance(magic)(ComponentOne);

export default () => (
  <RenderPropComponent>
    {({ someProp }) => {
      return <WithEnhancements someProp={someProp} />;
    }}
  </RenderPropComponent>
);

The error is 'someObject.someKey' is missing in props validation. I'm hitting a wall and have no idea what might be causing it, the same typing for the same data structure used in other components works absolutely fine, could it be a bug with eslint not being happy with multi-components files ?

Update: Seems like an eslint bug, for some reason it works when the prop is destructured like this and then using someObject.someKey:

const { someObject } = this.props;

Upvotes: 0

Views: 413

Answers (1)

Andrew Smith
Andrew Smith

Reputation: 1454

It's currently an eslint bug, reported here. It can be remedied by destructuring the props as mentioned by frontendgirl, and while that may not seem like clean code you'd only need to do it for components where you have a map object (one with an indexer property, the { [string]: string }.

Upvotes: 1

Related Questions