React Typescript access keys of prop array

Question

I have my Homepage which sends a modal component a profile like this.

<ProfileOverviewModal
     open={openProfile}
     onClose={closeAllModals}
     onCreateProfile={onCreateProfile}
     profile={state.profil}
/>

In my ProfileOverviewModal.tsx I have this props

type Props = {
  open: boolean
  onClose: () => void
  onCreateProfile: (values: ProfileModalFormValues) => void
  profile: Profil[]
}

When I console.log(profile) everything seems to work. This shows up in the console:

{Firstname: 'Eddy', Lastname: 'Browkin', __typename: 'Profil'}

But I can not access profile.Firstname && profile.Lastname for example

return (<h1>{profile.Firstname}</h1>)

Why is that? Any one can point me in the right direction.

Why are you expecting it to be an array profile: Profil[] and excessing like single object? — mickl
– mickl, Commented May 29, 2022 at 8:17
If your types are correct you're trying to read FirstName on an array (which is undefined). You'll need to map over profile, e.g. return profile.map((prof) => <h1>{prof.firstName}</h1>) — Richard Scarrott
– Richard Scarrott, Commented May 29, 2022 at 8:49

ashish0411 · Accepted Answer · 2022-05-29 08:42:06Z

1

Your profile prop expects array of object of type Profil, if you are passing single object then just change the prop as

type Props = {
  open: boolean
  onClose: () => void
  onCreateProfile: (values: ProfileModalFormValues) => void
  profile: Profil
}

And if you are passing array of profile then change you way you are accessing as below

return (<h1>{profile[index].Firstname}</h1>)

answered May 29, 2022 at 8:42

ashish0411

1363 bronze badges

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

Comments

tejastn10 · Accepted Answer · 2022-05-29 08:23:44Z

0

The issue is that you have defined the type as Profile[] which is expecting array of Profiles. Just remove the [] from the type and you won't be seeing any error.

answered May 29, 2022 at 8:23

tejastn10

5252 silver badges6 bronze badges

Comments

Alish Madhukar · Accepted Answer · 2022-05-29 08:39:49Z

0

Try this

return (
   <div>
      <h1> {profile.Firstname} </h1>
   </div>
)

Either use div tag or fragment i.e <> here h1 tag or everything else </>. Also. in props , onCreateProfile does'nt seem to be correct. Please check that also.

edited May 29, 2022 at 8:39

answered May 29, 2022 at 8:34

Alish Madhukar

5851 gold badge8 silver badges20 bronze badges

Collectives™ on Stack Overflow

React Typescript access keys of prop array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related