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>
                  <a href="">Home</a>
                </li>
                <li>
                  <a href="">Shop</a>
                </li>
                <li>
                  <a href="">Login</a>
                </li>
                <li>
                  <a href="">Signup</a>
                </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;

CodePudding user response：

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/

CodePudding user response：

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);
  };