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;
CodePudding user response:
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>;
});
}
CodePudding user response:
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;