Hiding and using API keys in react

So I’ve spent an entire day trying to figure this out… and I am new to api and .env files… I created a .env file and added it to gitnore sucessfully and added my news api key to the .env file BUT I have no idea how to use it via the process.env.REACT_APP_API_KEY.

I want to add the api key into the api url - and I tried to add it where the
process.env.REACT_APP_API_KEY is located… but it does not work…

any help would be great! Thanks!

import axios from 'axios';

const API_URL = 'https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=process.env.REACT_APP_API_KEY';

export const getNews = async () => {
  const result = await axios.get(API_URL)
  .then(response => {
  return response.data.articles;
  });
  return(result);
}

export const getNews2 = async () => {
  const result = await axios.get(API_URL2)
  .then(response => {
  console.log(response.data)
  return response.data.articles;
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {

You need to concatenate your url string with the API key.

const API_URL = https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${apiKeyVariable};

you mean:

const API_URL = ‘https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${process.env.REACT_APP_API_KEY}’;

?

I did that, it does not work

I mean template literal https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Or string concatenation:
const API_URL = "https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=" + apiKeyvariable;

I figured it out… you must add string template literals to make it work… so the answer is:
const API_URL =https://newsapi.org/v2/top-headlines?sources=techcrunch&apiKey=${process.env.REACT_APP_API_KEY};

remove quotes and add ``