How to declare mapped property name in React Typescript App

Question

I am trying to figure out why my code is telling me that my mapped data that has a property of 'name' is of type never. I am already declaring the commentsData in the interface but there is obviously an error occuring there.

Please see my code below:

interface IProps {
  commentsData: [] 
}

const CommentList: React.FC<IProps> = ({ commentsData }: IProps) => {
  return (
    <div>
      {commentsData.map(comment => {
        return (
          <div>
            {comment.name}
          </div>
        )
      })}
    </div>
  )
}

export const getStaticProps = async ()=> {
  const data = await fetch('https://jsonplaceholder.typicode.com/comments')
    .then((res) => res.json())
    .then((data) => data);
    return {
      props: {
        commentsData: data
      }
    }
}

export default CommentList;

And here is the image with the error that Typescript is throwing:

Anyone here ever saw this error? And how did you solve it. Thanks for any help!

Well you didn't specify what commentsData is an array of. Looks like it's an array of object, so you need to tell Typescript what those objects look like in your interface, e.g. commentsData: { name: string }[] — Jayce444
– Jayce444, Commented Dec 11, 2022 at 0:09
@Jayce444 sorry, I should've specified how the object looks. I have updated my post to show it — Kimbo
– Kimbo, Commented Dec 11, 2022 at 0:14
Ok well check gr33nTHumB's answer below, you have to tell Typescript how the object will look when you're defining it in the interface; then when you map over it in the component, it will know the properties the object has. Will fix your typing issue — Jayce444
– Jayce444, Commented Dec 11, 2022 at 0:38

gr33nTHumB · Accepted Answer · 2022-12-11 00:20:12Z

2

You need to specify what the array is of. Something like:

interface IComment {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
}

interface IProps {
  commentsData: IComment[] 
}

This way, TypeScript knows what kind of object to expect inside the array.

answered Dec 11, 2022 at 0:20

gr33nTHumB

3682 silver badges9 bronze badges

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

Comments

Shubham Rawat · Accepted Answer · 2022-12-11 01:00:02Z

0

Well, you have to define an interface with an indexer. because it's look like an array of objects.

I am sharing the link which can help you. How can i define an interface for array of an object

answered Dec 11, 2022 at 1:00

Shubham Rawat

255 bronze badges

Collectives™ on Stack Overflow

How to declare mapped property name in React Typescript App

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related