TypeError: Cannot read properties of undefined (reading 'Obj') React Native

Question

I'm retrieving a JSON object using React Native Fetch and my goal is to render it as a dropdown on screen. However, before working on the rendering part, I get this error "TypeError: Cannot read properties of undefined (reading 'Obj') React Native" on componentDidMount() and I am not sure what the issue is.

fetch("https://jsonplaceholder.typicode.com/todos/?_limit=10")  // **Api for fetching**
      .then(response => response.json())
      .then((responseJson) => {
        var count = Object.keys(responseJson.message.Obj).length;
        let drop_down = [];
        for(var i=0;i<count;i++){
          console.log(responseJson.message.Obj[i].title) // I need to add 
          drop_down.push({ value: responseJson.message.Obj[i].title }); // Creating array of data
        }
        this.setState({ drop_down }); // Set the new state
      })
      .catch(error =>console.log(error)) //to catch the errors if any
    }

Thanks in advance.

Answer 1

TypeError: Cannot read properties of undefined (reading 'Obj') means whatever you call .Obj upon is undefined. In your case it is responseJson.message is undefined. So every time you see this message, you need to trace up two layer to debug. In your case check what is responseJson

Since you are fetching from a public API, I did a quick call in my browser using the following debug code:

fetch("https://jsonplaceholder.typicode.com/todos/?_limit=10")
 .then(response => response.json())
 .then((responseJson) => {console.log(responseJson)})

And I see the following in my console:

0: {userId: 1, id: 1, title: 'delectus aut autem', completed: false}
1: {userId: 1, id: 2, title: 'quis ut nam facilis et officia qui', completed: false}
2: {userId: 1, id: 3, title: 'fugiat veniam minus', completed: false}
3: {userId: 1, id: 4, title: 'et porro tempora', completed: true}
4: {userId: 1, id: 5, title: 'laboriosam mollitia et enim quasi adipisci quia provident illum', completed: false}
5: {userId: 1, id: 6, title: 'qui ullam ratione quibusdam voluptatem quia omnis', completed: false}
6: {userId: 1, id: 7, title: 'illo expedita consequatur quia in', completed: false}
7: {userId: 1, id: 8, title: 'quo adipisci enim quam ut ab', completed: true}
8: {userId: 1, id: 9, title: 'molestiae perspiciatis ipsa', completed: false}
9: {userId: 1, id: 10, title: 'illo est ratione doloremque quia maiores aut', completed: true}

What this means is that your responseJson is already the data array that you want to work on. No need to do further modification, also there is no such key as responseJson.message nor responseJson.message.Obj .

Based on your code, I think this is what you would need:

fetch("https://jsonplaceholder.typicode.com/todos/?_limit=10")
  .then(response => response.json())
  .then((responseJson) => {
    const drop_down = responseJson.map(todo => { 
        return { value: todo.title }
    });
    this.setState({ drop_down });
  })
  .catch(error =>console.log(error))

Also you can refer to the API's guide which walk you through what the data looks like https://jsonplaceholder.typicode.com/guide/