How should one show name and id within the <h1> tag. this project gets its data via axios from an API.
import React, { useState } from "react";
import axios from "axios";
const Details = () => {
const [data, setData] = useState({
name: "",
id: "",
});
const apiDetails = () => {
axios
.get(`https://api.coingecko.com/api/v3/coins/${"ethereum"}`)
.then((response) => {
// console.log(response);
setData({
name: response.data.name,
id: response.data.id,
});
return setData;
});
};
return (
<div>
<h1>{setData.name}</h1>
<h1>{data.name}</h1>
<h1>{setData.id}</h1>
<h1>{data.id}</h1>
<h1>{setData.name}</h1>
</div>
);
};
export default Details;
You should use a useEffect as so, you can learn more about this hook here
import React, { useState, useEffect } from "react";
import axios from "axios";
const Details = () => {
const [data, setData] = useState(null);
const apiDetails = () => {
axios
.get(`https://api.coingecko.com/api/v3/coins/${"ethereum"}`)
.then((response) => {
// console.log(response);
//setData({
// name: response.data.name,
// id: response.data.id,
// });
return response;
});
};
useEffect(() => {
(async () => {
const response = await apiDetails();
setData({
name: response.data.name,
id: response.data.id,
});
})();
}, [])
if (data) {
return (
<>
<h1>{data.name}</h1>
<h1>{data.id}</h1>
</>
);
}
return null;
};
export default Details;