React eslint error missing in props validation on for the word “props”

I have the code below:

import React from "react";
import "./App.css";
import myPic from "./pics/John_Smith.jpg";

function App() {
  return (
    <div className="App">
            <header className="App-header">
                <div className="App-Modal">
                    <p className="App-Modal-Text">5 Birthdays today</p>
                    {/* <BirthdayCard job="Developer"/> */}
                    <BirthdayCard />
                </div>
      </header>
    </div>
  );
}

const BirthdayCard = (props) => {
    console.log(props);
    return <article className="BArticle">
        <Image></Image>
        <Text></Text>
        <p>{props.job}</p>
    </article>

};

const Image = () => (
    <img src={myPic} alt="" />
 );

const Text = () => {
    return <article className="BText">
        <Name></Name>
        <Age></Age>
    </article>
}

const Name = () => (
    <h5>John Smith</h5>
)

const Age = () => (
    <p>30 years</p>
)

export default App;

I am getting the error; “job” is missing in props validation react/prop-types, but this ONLY happens if I use the word “props” as a parameter. If I change it to anything else even “prop”, the error goes away. Does anyone know why this is and how to fix it to be able to use “props” as a parameter?

Answer

Prop validations is a way of typechecking the props that a component recieves.

For instance, in the case of BirthdayCard you could do something like:

import PropTypes from 'prop-types';

BirthdayCard.propTypes = {
  job: PropTypes.string
};

So whenever you use BirthdayCard and pass the prop job with a type other than string you will get a console error warning you that the type should be string.

// This throws a console error
<BirthdayCard job={1} />

// This does not throw any error
<BirthdayCard job="programmer" />

If you are not going to be defining prop types you might want to disable this warning.

As of why it only throws the warning when the name is props, I have no clue. Maybe because it’s a convention to use the name props.

Side note. You can use object deconstruction to clean your component definitions a little bit.

const BirthdayCard = ({ job }) => {
    return <article className="BArticle">
        <Image></Image>
        <Text></Text>
        <p>{job}</p>
    </article>
};