CODEWITHSUNDEEP
reactjstypescript
mattsmith5
mattsmith5

Reputation: 1133

React: '.map is missing in props validation' in Typescript Functional Component

I am getting the following error in Lint for a Typescript function component. How can I fix?

paymentListData.map' is missing in props validation , also getting something similar for paymentListData.length

type Props = {
  paymentListData: PaymentState[];
};


const PaymentList = ({
  paymentListData
}: Props) => {

   return (
    <Box>
       {paymentListData?.map(payment => (
        <PaymentCollectedRow
           key={payment.paymentId}
           patientId={patientId}
           serviceLocationGuid={serviceLocationGuid}
           payment={payment}
           receiptRequest={receiptRequest}
         />
     ))}

The solutions in stackoverflow are for Classes, not Typescript Functions.

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

Upvotes: 0

Views: 157

Answers (1)

Toni Bardina Comas
Toni Bardina Comas

Reputation: 1808

You can do PropTypes checks on the functional components as you would in classes.

import PropTypes from 'prop-types'

function HelloWorldComponent({ name }) {
  return (
    <div>Hello, {name}</div>
  )
}

HelloWorldComponent.propTypes = {
  name: PropTypes.string
}

export default HelloWorldComponent

You can check the docs here -> https://reactjs.org/docs/typechecking-with-proptypes.html

Upvotes: 1

Related Questions