I am just trying to experiment with an app, and in my html I am trying to return the props of userData which in my console logs things such as lineStatus etc, however I seem to be returning nothing.
my code is as follows:
import React, { useState, useEffect } from 'react'
import axios from "axios";
const tflData = "https://api.tfl.gov.uk/line/mode/tube/status";
axios.request(tflData).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});
function Lines() {
const [userData, setUserData] = useState({});
const tflUserWithFetch = async () => {
const response = await fetch(tflData);
const jsonData = await response.json();
setUserData(jsonData);
};
useEffect(() => {
tflUserWithFetch();
}, []);
return (
<div className="App">
<header className="App-header">
<h2>Line Data</h2>
</header>
<div className="user-container">
<h5 className="info-item">Tube station: {userData.name}</h5>
<h5 className="info-item">Status: {userData.lineStatuses}</h5>
</div>
</div>
);
}
export default Lines
Basically I am trying to return the values or content values but I am missing something.
First of all, pick either axios or fetch. There are lots of articles explaining the differences.
Secondly, when viewing the endpoint you provided I can see the results are in a JSON list. So accessing the name and linestattusses will not work directly. You can however wrap it by mapping each value in the list:
<div className="App">
<header className="App-header">
<h2>Line Data</h2>
</header>
{userData.map((user) => (
<div className="user-container" key={user.id}>
<h5 className="info-item">Tube station: {user.name}</h5>
<h5 className="info-item">Status: {user.lineStatuses}</h5>
</div>))
}
</div>
I tried to make the request from the URL you provided in the code,
seems like it returns a JSON array, so when you are trying to reach userData.name it doesn't exist on userData, userData contains a list