TypeScript: How to solve 'property does not exist for type' error for arrays?

Question

I am new to TypeScript/React. I am getting an error for the following when trying to pass props as an array to a component.

I am calling the component as such:

return <ContactInfoBlock contactInfo={contact} />;

where contact is an array of information, eg:

const contact = {
  contactName: 'Jim',
  contactAvatar: 'jim.png',
  contactEmail: '[email protected]',
  contactPhone: '1234 4566',
};

And on my component file I have:

type ContactInfoInterface = {
  contactName: string;
  contactEmail: string;
  contactPhone: string;
};

interface ContactInfoBlockProps {
  contactInfo: ContactInfoBlock[];
}

const ContactInfoBlock = ({ contactInfo }: ContactInfoBlockProps) => {

 return (
   <Typography variant="h6">
     {contactInfo.contactName}
   </Typography>
   //etc

This works - the data actually appears on the front end. But I get the warning:

Property 'contactName' does not exist on type 'ContactInfoInterface[]'. TS2339

According to the tutorials I've followed, this should work. But I still get the error.

Would anyone know what I could do?

basarat · Accepted Answer · 2020-05-28 05:07:14Z

1

This works - the date actually appears on the front end

This means your TypeScript signature is wrong.

Fix

It should be:

interface ContactInfoBlockProps {
  contactInfo: ContactInfoBlock;
}

i.e. it is not an array as contactInfo.contactName is working at runtime

answered May 28, 2020 at 5:07

basarat

278k61 gold badges475 silver badges528 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript: How to solve 'property does not exist for type' error for arrays?

1 Answer 1

Fix

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Fix

Comments

Your Answer

Sign up or log in

Post as a guest

Related