ESlint is giving me this warning when I am piling my code. We are using the AirBNB config.

import React from 'react';
import { Link } from 'react-router-dom';

const ProfileInterestSkillButtons = ({
    tags, title, user, member,
}) => {

    return (
        <div>
           {title}
        </div>
    );
};

export default ProfileInterestSkillButtons;

ESlint is giving me this warning when I am piling my code. We are using the AirBNB config.

import React from 'react';
import { Link } from 'react-router-dom';

const ProfileInterestSkillButtons = ({
    tags, title, user, member,
}) => {

    return (
        <div>
           {title}
        </div>
    );
};

export default ProfileInterestSkillButtons;

• javascript
• reactjs
• webpack
• eslint
• eslint-config-airbnb

• At least paste the code including the 'line 5' here? – Liren Yeo Commented Jan 5, 2018 at 5:57
• thanks! just added a stripped down version of the react ponent – Anthony Delgado Commented Jan 5, 2018 at 6:06
• So, you're not doing any validation and you wondering why you're getting a warning saying you're not doing validation? – Thomas Hennes Commented Jan 5, 2018 at 6:07

2 Answers 2

Your ponent is using a prop named tags that it is receiving from its parent ponent.

ESLint is just warning you to define a type check for that prop in the ponent where you are using it. You can do that by either using PropTypes or by using flow.

Simple example using PropType would be:

... // other imports
import PropTypes from 'prop-types';

... // your ponent declaration

ProfileInterestSkillButtons.propTypes = {
  tags: PropTypes.array.isRequired,
  title: PropTypes.string.isRequired,
  ... // and more
};

export default ProfileInterestSkillButtons;

PropType: https://reactjs/docs/typechecking-with-proptypes.html

Flow: https://flow/en/docs/react/

Using Flow

Quick recipe to type-check props using flow.

// @flow
import React from 'react';
import type { Node } from 'react';
import { SafeAreaView, ScrollView, StatusBar, StyleSheet } from 'react-native';

const ScreenDefaultView = (props: { layout: Node, scrollableLayout?: boolean } ) => {
    const layout = props.layout;
    const scrollableLayout = props.scrollableLayout;
    return ( ...

Note: in order to add Optional Parameters or also called in Flow maybe type just add a ?.

// scrollableLayout? is optional note the ? 
props: { layout: Node, scrollableLayout?: boolean }

Flow Documentation

• Predicate Functions