I am getting a response saying api token is undefined in React - reactjs

Question

I have written correctly in .env.local file as REACT_APP_API_KEY=myapikeytoken and my key is also correct but I am getting token undefined when I console.log response. This is the website url - https://app.json-generator.com/ from where I generated a fake API.
Below is the code where I am fetching an api.
import React, { useEffect } from "react";
import "./header.css";
const Header = () => {
const getHeaderData = async () => {
const apiKey = process.env.REACT_APP_API_KEY;
const response = await fetch(
`https://api.json-generator.com/templates/jy5YJ7qSuzOt/data?access_token=${apiKey}`
);
console.log(response);
if (response.ok) {
console.log(response);
} else {
console.log("response failed");
}
const data = response.json();
console.log(data);
};
useEffect(() => {
getHeaderData();
}, []);
return (
<>
<div className="dvHeader">
<div className="container-lg">
<div className="row align-items-center pt-1">
<div className="col d-lg-none">
<i className="fa-solid fa-bars"></i>
</div>
<div className="col col-lg-auto text-center text-lg-left">
<img
width={50}
src="https://static.wixstatic.com/media/2c0034_a27b95faba1d432fbddcf6ac4e9683ba~mv2.png"
alt=""
/>
</div>
<div className="dvSlideMenu col-lg-auto px-0 px-lg-3">
<button className="btn btn-black closeBtn d-lg-none">
<i className="fa-solid fa-xmark"></i>
</button>
<ul className="dvMenu">
<li>
Home
</li>
<li>
Shop
</li>
<li>
Login
</li>
<li>
Signup
</li>
</ul>
</div>
<div className="col col-lg-auto ml-lg-auto text-right">
<i className="fa-solid fa-cart-shopping"></i>
</div>
</div>
</div>
</div>
</>
);
};
export default Header;

Answer 1

Fetch is already async and you do not need to await it. I would also suggest that you use fetch like this:
const getHeaderData = async () => {
fetch(`https://api.json-generator.com/templates/jy5YJ7qSuzOt/data?access_token=${process.env.REACT_APP_API_KEY}`)
.then((response) => response.json())
.then((response) => {
// Response is ok, do something
})
.catch((error) => {
// Some error, handle it here
});
}
Read more about it:
https://reactjs.org/docs/faq-ajax.html
https://www.freecodecamp.org/news/fetch-data-react/

Answer 2

I found the issue. The issue was await. I didn't wrote await before response.json().
Code should look like this below:
const getHeaderData = async () => {
const apiKey = process.env.REACT_APP_API_KEY;
const response = await fetch(
`https://api.json-generator.com/templates/jy5YJ7qSuzOt/data?access_token=${apiKey}`
);
console.log(response);
if (response.ok) {
console.log(response);
} else {
console.log("response failed");
}
const data = await response.json(); //added await here
console.log(data);
};