0

In the react native app I'm retrieving some data from my backend and then want to display it to the app user: when I log the data I can see that I receive it and stored it properly in the state as an object:

// console.log("received the data: ", this.state.data) ->
received the data:  Object {      
  "a": 48,
  "b": "2021-03-29T17:11:51Z",
  "c": "",
  "d": false
}

But when I try to render that in my view, the screen simply stays empty (no error message):

render() {
  // let me check, if the data is really there
    Object.entries(this.state.data).map(([key, value]) => {
                console.log("key: ", key, "- value: ", value)
            })
  // output:
  // key: a - value: 48,
  // key: b - value: 2021-03-29T17:11:51Z,
  // key: c - value: ,
  // key:d - value: false

    return (
            <View>
                {Object.entries(this.state.data).map(([key, value]) => {
                    return <View key={key}><Text>{value}</Text></View>
                })}
            </View>

    )
}

I also tried this, but still I receive an empty screen:

render() {
    return (
         { this.state.data.map((items, index) => {
              return (
                  <ul key={index}>
                       {Object.keys(items).map((key) => {
                          return (
                             <li key={key + index}>{key}:{items[key]}</li>
                          )
                       })}
                  </ul>
              )
         })}
   )
}

Edit: The full component:

import React from 'react'
import { View, Text } from 'react-native'
import axios from 'axios';

class SuccessScreen extends React.Component {
    baseURL = "https://my-backend-server-URL.com/data"

    state = {
        data: {},
    }

    componentDidMount() {
        this.startGetData();
    }

startGetData = () => {
        
        axios.get(this.baseUrl)
            .then(response => {
                console.log("got the data: ", response.data)
                this.state.data = response.data;
            })
            .catch(function (err) {
                //handle error
                console.log("error getting data: ", err.message)
                return {
                    type: "REGISTER_USER_FAILED",
                    payload: null
                }
            });
    };

    render() {
        console.log("This log will show up")
        return (
            <View>
                {this.state.vehicleData && Object.entries(this.state.vehicleData).map(([key, value]) => {
                    console.log("this log never shows up... key: ", key)   // these logs don't not show up
                    return <View key={key}><Text>{value}</Text></View>
                })}
            </View>

        )
    }
}

export default SuccessScreen;
6
  • 2
    put a console.log inside Object.entries(this.state.data).map(([key, value]) => { just before the return that you have, and check if it's there the data. Also, show what imports are you using in your component Commented Mar 29, 2021 at 17:55
  • I put a console.log just before the return statement, but the log doesn't appear in my logs... I thought it's maybe not possible to call console.log there? Commented Mar 29, 2021 at 17:56
  • and I added my imports at the bottom of my post now. Commented Mar 29, 2021 at 17:57
  • 2
    yes you can, example: jsfiddle.net/pmiranda/wncm5ho3/1 So the data is not in the this.state.data that's your problem Commented Mar 29, 2021 at 17:57
  • 1
    Is it possible that you are mutating state somehow? This would prevent the component from re-rendering when it should. Your render method is fine assuming that the data exists. if @pmiranda's answer doesn't solve this then please include the entire component. Commented Mar 29, 2021 at 18:04

1 Answer 1

1

Wait for data to be defined, Try this:

return (
    <View>
        {this.state.data && Object.entries(this.state.data).map(([key, value]) => {
            return <View key={key}><Text>{value}</Text></View>
        })}
    </View>

Edit:

Don't mutate this.state.data = response.data that way, use the setState:

 this.setState({ data: response.data });

https://reactjs.org/docs/faq-state.html#what-does-setstate-do

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

3 Comments

Probably a good idea to wait for the data. I tried this, but it seams like it never get's even called. (I added the full component in my post now)
I edited my answer, you are not setting your state correctly.
I always forget setState... ok it worked now with this.setState({ data: response.data });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.