Accessing nested data object using ReactJS (so close!)

Question

This is my first time using React and I am having an issue accessing a nested data object.

I want to access the commute value under each object. I can access the top level data like activities.length. But, when I attempt something like activities[0].commute I am unsuccessful.

My goal is to list all activities with their respective commute values.

Any help is incredibly appreciated. Thanks!

Here's the code:

import React, { useState, useEffect } from 'react';

function App() {
const [isLoading, setIsLoading] = useState(true)
const [activities, setActivities] = useState({})


let clientID = "****";
let clientSecret = "****";


const refreshToken = "****";
const callRefresh = `https://www.strava.com/oauth/token?client_id=${clientID}&client_secret=${clientSecret}&refresh_token=${refreshToken}&grant_type=refresh_token`


const callActivities = `https://www.strava.com/api/v3/athlete/activities?access_token=`

useEffect(() => {
fetch(callRefresh, {
  method: 'POST'
})


.then(res => res.json())
.then(result => getActivities(result.access_token))
}, [callRefresh])


function getActivities(access){
  fetch(callActivities + access)
  .then(res => res.json())
  .then(data => setActivities(data), setIsLoading(prev => !prev))
  .catch(e => console.log(e))
 }

function showActivities(){
if(isLoading) return <>LOADING</>
if(!isLoading) {
  console.log(activities)
 return activities.length
  }
}

return (
  <div className="App">
 {showActivities()}
</div>
   );
  }

 export default App;

Here's the data:

windowsill · Accepted Answer · 2021-12-18 07:05:07Z

1

If activities is a list, then the default value needs to be a list.

const [activities, setActivities] = useState([]);

Then simply map activities into a list of components.

function showActivities() {
  if(isLoading) return <>LOADING</>;

  return (activities || []).map(activity => {
    return <Text>{activity.commute}</Text>;
  });
}

answered Dec 18, 2021 at 7:05

windowsill

3,6491 gold badge11 silver badges15 bronze badges

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

6 Comments

Devvvvv Over a year ago

Thanks, windowsill. Unfortunately, this does not work because 'Text' is undefined. ERROR src/App.js Line 40:13: 'Text' is not defined react/jsx-no-undef

windowsill Over a year ago

What? Why would I know how you want to render your activity commute? Use your own rendering logic.

windowsill Over a year ago

Try it with <>{activity.commute}</>. If there are any errors, paste the error here please.

Devvvvv Over a year ago

Uncaught (in promise) TypeError: (activities || []).map is not a function

Devvvvv Over a year ago

So, I am able to access the top level object of the data such as activities.length, but cannot get deeper in the data structure.

|

Erling Olsen · Accepted Answer · 2021-12-18 07:16:36Z

0

You will now have access to the nested data objects, listing all activities with their respective commute values.

import React, { useState, useEffect } from 'react';

function App() {
const [isLoading, setIsLoading] = useState(true)
const [activities, setActivities] = useState([]);


let clientID = "****";
let clientSecret = "****";


const refreshToken = "****";
const callRefresh = `https://www.strava.com/oauth/token?client_id=${clientID}&client_secret=${clientSecret}&refresh_token=${refreshToken}&grant_type=refresh_token`


const callActivities = `https://www.strava.com/api/v3/athlete/activities?access_token=`

useEffect(() => {
fetch(callRefresh, {
  method: 'POST'
})


.then(res => res.json())
.then(result => getActivities(result.access_token))
}, [callRefresh])


function getActivities(access){
  fetch(callActivities + access)
  .then(res => res.json())
  .then(data => setActivities(data), setIsLoading(prev => !prev))
  .catch(e => console.log(e))
 }

function showActivities() {
  if(isLoading) return <>LOADING</>;

  return (activities || []).map(activity => {
    return <Text>{activity.commute}</Text>;
  });
}

return (
  <div className="App">
 {showActivities()}
</div>
   );
  }

 export default App;

answered Dec 18, 2021 at 7:16

Erling Olsen

7606 silver badges16 bronze badges

3 Comments

Devvvvv Over a year ago

I deeply apologize because I know you put energy into responding. I made an error; this is for ReactJS, not React Native. I believe I may have selected the React Native tag.

Devvvvv Over a year ago

Thanks, Johan. Unfortunately, this does not work because 'Text' is undefined. ERROR src/App.js Line 40:13: 'Text' is not defined react/jsx-no-undef

Erling Olsen Over a year ago

@Devvvvv I see. I'm sorry. I do not know how to help you. Can you rate my answer at least for commitment and goodwill? Thank you

Collectives™ on Stack Overflow

Accessing nested data object using ReactJS (so close!)

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related