Getting Object is possibly 'undefined' in typescript react

Question

I am practicing typescript with react and fetching some data from an API I created a few days ago, API is working fine, am getting data for my front-end while fetching but when I try to use forEach or map method on that array of data it is throwing me an error: Object is possibly 'undefined'

interface Posts {
  _id: string
  title: string
  date: string
  text: string
  author_name: string
  published: boolean
  __v: number
}

const TextField = () => {
  const [posts, setPosts] = useState<Posts>()

  const fetchData = async () => {
    const result = await fetch("https://ed-blog-api.herokuapp.com/api/posts")
    const data = await result.json()
    const posts = data.posts
    setPosts(posts)
  }

  return (
    <div>
      <button onClick={fetchData}>Click</button>
      {posts.forEach((post: object) => {  // getting error here for posts
        console.log(post)
      })}
    </div>
  )
}

first off you have a naming conflict, naming const posts = data.posts and [posts, setPosts] = useState<Posts>() Just do setPosts(data.posts ?? []) or something. To get "rid" of the possibly undefined issue you can do posts?.forEach((post) => console.log(post)) Using the ? operator the assertion will only be executed if posts is not undefined. — Braks
– Braks, Commented Oct 7, 2021 at 6:12
Also I'm unsure about your interface. Shouldnt it be Post and "Posts" is Post[], meaning it is an array of posts. So you could simply initialize your posts as [posts, setPosts] = useState<Post[]>([]). Then you could just use posts.map(post: Post => <div key={post._id}>Post works!</div> Using the "object" type is strongly discouraged, you should avoid doing that. — Braks
– Braks, Commented Oct 7, 2021 at 6:16
You can check out this link: robinwieruch.de/react-hooks-fetch-data. — tcconstantin
– tcconstantin, Commented Oct 7, 2021 at 6:19
Hey @Braks thanks your solution worked for me, please make this as answer so I can mark as answered thanks a lot again — Luffy D. Monkey
– Luffy D. Monkey, Commented Oct 7, 2021 at 6:21

Erfan · Accepted Answer · 2021-10-07 06:19:05Z

I think your Posts interface is actually the interface of a single Post

so:

interface Post {
  _id: string
  title: string
  date: string
  text: string
  author_name: string
  published: boolean
  __v: number
}

type Posts=Post[]

Now in here, you don't need to type post as object anymore. Typescript will infer it itself.

    const TextField = () => {
  const [posts, setPosts] = useState<Posts|[]>([])

  const fetchData = async () => {
    const result = await fetch("https://ed-blog-api.herokuapp.com/api/posts")
    const data = await result.json()
    const posts = data.posts
    setPosts(posts)
  }

  return (
    <div>
      <button onClick={fetchData}>Click</button>
      {posts.forEach((post) => {  
        console.log(post)
      })}
    </div>
  )
}

But actually the reason of that error, is that in JavaScript the type of null is also object! so if you type anything as object, you are saying it could be an array, object or null. if it is null, you can't use any properties of it.

kyun · Accepted Answer · 2021-10-07 06:14:54Z

2

Response

{
  "posts": [{
    "_id": "61514ba64209dbbaef9d05bb",
    "title": "Valorant Sucks",
    "date": "2021-09-27T04:40:05.001Z",
    "text": "Valorant Sucks a lot, everytime I got fuccking smurf, not even a single bullet registering and lots of bugs and bugs",
    "author_name": "Dev Chaudhary",
    "published": true,
    "__v": 0
  }]
}

as the response that you used, the response.posts is Array.

so you should do like this.

const [posts, setPosts] = useState<Array<Posts>>([])

Futhermore,

return (
    <div>
      <button onClick={fetchData}>Click</button>
      {posts.forEach((post) => {  // you don't need to use `object` as type.        
        console.log(post)
      })}
    </div>
  )

answered Oct 7, 2021 at 6:14

kyun

10.4k9 gold badges36 silver badges79 bronze badges

Comments

CrowRish · Accepted Answer · 2021-10-07 06:43:19Z

Full code

interface Posts {
  _id: string;
  title: string;
  date: string;
  text: string;
  author_name: string;
  published: boolean;
  __v: number;
}

const TextField = () => {
  const [posts, setPosts] = useState<Posts[]>([]);

  const fetchData = async () => {
    const result = await fetch('https://ed-blog-api.herokuapp.com/api/posts');
    const data = await result.json();
    const posts = data.posts;
    setPosts(posts);
  };

  return (
    <div>
      <button onClick={fetchData}>Click</button>
      {posts.map((post: Posts, index: number) => {
        // getting error here for posts
        console.log(post);
        return <div key={index}>{JSON.stringify(post)}</div>;
      })}
    </div>
  );
};

Make posts an array. Then you can solve the loop error.

const [posts, setPosts] = useState<Posts[]>([]);

And I recommend to use map instead of forEach

{posts.map((post: Posts, index: number) => {
    console.log(post);
    return <div key={index}>{JSON.stringify(post)}</div>;
})}

or (If you simply want to output only the component)

{posts.map((post: Posts, index: number) => (
    <div key={index}>{JSON.stringify(post)}</div>
))}

Collectives™ on Stack Overflow

Getting Object is possibly 'undefined' in typescript react

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