React eslint error missing in props validation on for the word "props"

Question

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 1

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.

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>
};