Line 5: 'tags' is missing in props validation react/prop-types

Question

ESlint is giving me this warning when I am compiling 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;

Answer 1

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

ESLint is just warning you to define a type check for that prop in the component 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 component declaration

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

export default ProfileInterestSkillButtons;

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

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