skip to Main Content

I have the following "warning" in my code when using props for React. Everything seems to be working fine, however, I have that red underline to my props and when I hover them I have this: is missing in props validationeslintreact/prop-types. Anyone can help me with this, I will appreciate it?

export function Order(props) {
  const { id, img, title, description, price } = props;
  return (
    <>
      <div id={`product-id-${id}`}>
        <img
          id={`product-image-${id}`}
          className="product-image"
          src={img}
          alt="This is a product image"
        />
        <h3 className="order-title">${title}</h3>
        <p>${description}</p>
        <p className="price">$ ${price}</p>

        <div>
          <button id={id} className="order-btn">
            Add to Cart
          </button>
        </div>
      </div>
    </>
  );
}

Everything is working ok, but I am assuming is something wrong with my code

2

Answers


  1. The error/warning seems to be coming from ESLint (the warning title indicates as much).

    You can tell ESLint to ignore prop-type linting by adding the following to your .eslintrc.json or .eslintrc.js file (create the file at your project root if it doesn’t already exist):

      "overrides": [
        {
          "rules": {
            "react/prop-types": "off"
          }
        }]
    
    Login or Signup to reply.
  2. The error/warning seems to be coming from ESLint (the warning title indicates as much).

    You can tell ESLint to ignore prop-type linting by adding the following to your .eslintrc.json or .eslintrc.js file (create the file at your project root if it doesn’t already exist):

      "overrides": [
        {
          "rules": {
            "react/prop-types": "off"
          }
        }
    

    This is the source of the docs page for that ESLint config.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search