Unable to get Single Object data from array in react-native

Question

I am new in react-native.I am unable to get "present" data from my API and I am getting an error "cannot read property present" so i just want to get my API response.Here is my api data and please check my code too.

{
 "message": "present in this month",
  "data": [
    {
        "present": 10
    }
   ],
  "status": "1"
 }


  async componentDidMount() { 
 try {
            const DEMO_TOKEN = await AsyncStorage.getItem('isLoggedIn');
            if (DEMO_TOKEN != null) {
                console.log('Token', DEMO_TOKEN);
                fetch('http://104.197.28.169:3000/userPresentInThisMonth', {
                    method: 'GET',
                    headers: {
                        Authorization: 'Bearer ' + DEMO_TOKEN,
                    },                     
                })
                    .then(response => response.json())                     
                    .then(responseJson => {
                          alert(responseJson)              
                        console.log(responseJson);
                        this.setState({
                            presentmonthdata : responseJson,
                        });
                    });
            }
        } catch (error) {
            alert(JSON.stringify(error));
            console.error(error);
        }
   }

This is my Text value.

   {this.state.presentmonthdata.data[0] &&
    <Text   style={{color: 'grey',fontSize: 30,   fontWeight: 'bold',  }}>
                            {this.state.presentmonthdata.data[0].present}
                  </Text>

}

I am getting an error "cannot read property '0' of undefined " . — Rohit
– Rohit, Commented Apr 28, 2020 at 4:57
since you are fetch data from API you should wait until data load. this.state.presentmonthdata.data[0] && this.state.presentmonthdata.data[0].present — SDushan
– SDushan, Commented Apr 28, 2020 at 6:11

Goskula Jayachandra · Accepted Answer · 2020-04-29 09:42:00Z

1

Try this:

change:

{this.state.presentmonthdata.data[0] &&
    <Text style={{color: 'grey',fontSize: 30,   fontWeight: 'bold',  }}>
                            {this.state.presentmonthdata.data[0].present}
                  </Text>

to

<Text>
{this.state.presentmonthdata.data!= undefined ? this.state.presentmonthdata.data[0].present: null}
</Text>

Hope this helps!

answered Apr 29, 2020 at 9:42

Goskula Jayachandra

4,2212 gold badges16 silver badges23 bronze badges

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

Comments

morteza moradi · Accepted Answer · 2020-04-27 14:29:56Z

0

the solution is

{this.state.presentmonthdata.data[0]}

answered Apr 27, 2020 at 14:29

morteza moradi

1432 silver badges9 bronze badges

6 Comments

Rohit Over a year ago

I am getting an error "cannot read property '0' of undefined "

Rohit Over a year ago

{ "message": "present in this month", "data": [ { "present": 10 } ], "status": "1" }

morteza moradi Over a year ago

the problem is you didn't parse JSON In the response and you setState a JSON

morteza moradi Over a year ago

please use response.json() before return response

morteza moradi Over a year ago

your value and key is wrapped with " " and it is the problem

|

Rajiv · Accepted Answer · 2020-04-28 07:04:47Z

0

Try the following: {this.state.data.length > 0 ? this.state.data[0].present : 0;}

I'm guessing data is either a blank array or another data type...

answered Apr 28, 2020 at 7:04

Rajiv

363 bronze badges

Collectives™ on Stack Overflow

Unable to get Single Object data from array in react-native

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related