Failed to Compile error - Unexpected token - reactjs

Question

This is a React app - Here is my code:
NewsContext.js
import React, { createContext, useEffect, useState } from "react";
import axios from 'axios'
export const NewsContext = createContext()
export const NewsContextProvider = (props) => {
const [data, setData] = useState([])
const apikey = "e25c25eb946e48779021963c288ce5cc";
useEffect(() => {
axios
.get(
'https://newsapi.org/v2/everything?q=tesla&from=2021-06-21&sortBy=publishedAt&apiKey=${apiKey}'
)
.then(response => setData(response.data))
.catch(error => console.log(error));
}, [data]);
return (
<NewsContextProvider props={data}>
{props.children}
</NewsContextProvider>,;
);
};
But when I run it I get this error:
Copy of error
./src/NewsContext.js
SyntaxError: C:\Users\HP\Documents\GitHub\newsfinder-app\src\NewsContext.js: Unexpected token (22:31)
20 |
21 | {props.children}
22 | ,;
| ^
23 | );
24 | };

Answer 1

This code works for me:
import React, {createContext, useEffect, useState} from "react"
import axios from "axios"
export const NewsContext = createContext()
export const NewsContextProvider = (props) => {
const [data, setData] = useState([])
const apikey = "e25c25eb946e48779021963c288ce5cc"
const apiUrl = `https://newsapi.org/v2/everything?q=tesla&from=2021-06-21&sortBy=publishedAt&apiKey=${apikey}`
useEffect(() => {
axios
.get(
apiUrl
)
.then(response => setData(response.data))
.catch(error => console.log(error))
}, [data, apiUrl])
return (
<NewsContextProvider props={data}>
{props.children}
</NewsContextProvider>
)
}
and in the index.js just do:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {NewsContextProvider} from "./NewContextProvider"
ReactDOM.render(
<React.StrictMode>
<NewsContextProvider>
<App />
</NewsContextProvider>
</React.StrictMode>,
document.getElementById('root')
);

Answer 2

From what I understood from your code is, there are two errors
Remove the ,; from return block
And use backticks instead of single quotation. It's called Template Literals
And the Last one is Passing the data in array in useEffect, it'll cause an infinite loop when the component will render, just pass an empty array, it means it will run only once when the component mounts
axios
.get(
`https://newsapi.org/v2/everything?q=tesla&from=2021-06-
21&sortBy=publishedAt&apiKey=${apiKey}`)
// should be backticks
.then(response => setData(response.data))
.catch(error => console.log(error));
And In useEffect
const apiRequest = () =>{
const apikey = "e25c25eb946e48779021963c288ce5cc";
axios
.get(
`https://newsapi.org/v2/everything?q=tesla&from=2021-06-21&sortBy=publishedAt&apiKey=${apiKey}`
)
.then(response => setData(response.data))
.catch(error => console.log(error));
}
useEffect(() => {
apiRequest();
}, []); // you should not pass data,
// as it will cause an infinitie loop in the useEffect, just pass empty array to avoid the loop
So the Code will look like
import React, { createContext, useEffect, useState } from "react";
import axios from 'axios'
export const NewsContext = createContext()
export const NewsContextProvider = (props) => {
const [data, setData] = useState([])
//const apikey = "e25c25eb946e48779021963c288ce5cc";
const apiRequest = () =>{
const apikey = "e25c25eb946e48779021963c288ce5cc";
axios
.get(
`https://newsapi.org/v2/everything?q=tesla&from=2021-06-21&sortBy=publishedAt&apiKey=${apiKey}`
)
.then(response => setData(response.data))
.catch(error => console.log(error));
}
useEffect(() => {
apiRequest();
}, []);
return (
<NewsContextProvider props={data}>
{props.children}
</NewsContextProvider>
);
};