ESLint: '.map is missing in props validation' (eslint react/prop-types) in Typescript React

Question

First time posting!

I'm using Typescript with React to make a small project. I'm having an issue with ESLint not recognizing that a prop variable with the type string[] would normally have a .map function because its an array.

App.tsx

import React, { useState } from 'react'

function App() {
  const [ingredientsList, setIngredientsList] = useState<string[]>([]);

  return (
    <div className="App">
      <Route path="/" exact render={() => <IngredientListSearch ingredientsList={ingredientsList} setIngredientsList={setIngredientsList} />} />
      <Route path="/about" exact component={About} />
   </div>
  );
}

export default App;

in my IngredientListSearch.tsx

import React, { useState } from 'react';
// ... bootstrap imports

type Props = {
  ingredientsList: string[]
  setIngredientsList: (arr: string[]) => void
}

function IngredientListSearch({ ingredientsList, setIngredientsList }: Props) {
  // state hooks
  const [searchTerm, setSearchTerm] = useState<string>('');

  // ... miscellaneous logic functions
  
  // function with error in question
  function makeIngredientItems() {
    return (
      <>
        <p>Included Ingredients:</p>
        <ListGroup variant="flush">
          // piece of code in question
          {ingredientsList.map((name, index) => (
            <ListGroup.Item key={index} variant="info">
              // ... Item details here
            </ListGroup.Item>
          ))}
        </ListGroup>
      </>
    );
  }

  return (
    <>
      //... html elements that work fine
      
      <div className="ingredient-list-container">
        {
          ingredientsList.length === 0
            ? <p>Add some Ingredients to get started!</p>
            : makeIngredientItems()
        }
        </div>
        <div />
      </div>
    </>
  );
}

export default IngredientListSearch;

ESLint will throw me an error with the message 'ingredientsList.map' is missing in props validation (eslint react/prop-types)

I'm not really sure what the issue is, I would appreciate any help I can get!

Edit:

Adding an IngredientListSearch.propTypes to the bottom of the file in conjunction with my Props use solved my linter error like so.

type Props = {
  ingredientsList: string[],
  setIngredientsList: (arr: string[]) => void
}

function IngredientListSearch({ ingredientsList, setIngredientsList }: Props) {
//... component
}

IngredientListSearch.propTypes = {
  ingredientsList: PropTypes.arrayOf(PropTypes.string).isRequired,
  setIngredientsList: PropTypes.func.isRequired,
};

But it didn't make sense to me to be using both propTypes and Typescript. I understand Typescript only type checks at compile while propTypes checks at runtime, but I don't believe both are necessary.

My project works just fine declaring a Prop type with Typescript, and its just the ESlinter yelling at me. I'm going to just remove the react/prop-types rule and continue to use type Props.

Answer 1

Define type of prop like this:

IngredientListSearch.propTypes = {
  ingredientsList: PropTypes.arrayOf(PropTypes.string)
}

The props is a plain object. If you want to iterate over it add a proper prop-type check.