33
Variable Undefined For Simple Demo App
Dear kind, empathetic, helpful members of the forum,
I am writing a straightforward react app with a very basic api (git hub repo : https://github.com/mrarthurwhite/use_effect_react_hooks_demo). Following is the functional component which is a demo component meant to illustrate a fetch (with axios), using the useEffect
hook, followed by just displaying the data.
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function GetWordsWAxiosNLoading() {
const [words, setWords] = useState([]);
let isLoading = false;
console.log("isLoading prefetch " + isLoading);
async function fetchData(){
isLoading = true;
console.log("isLoading fetching " + isLoading);
let url = 'http://localhost:1111/wordlist';
const result= await axios(url);
setWords(result.data);
isLoading = false;
console.log("isLoading resetting " + isLoading);
};
useEffect(() => {fetchData()}, [] );
console.log("isLoading postfetch " + isLoading);
return (
<>
{ isLoading? (<div>Loading . . . </div>) : ( {words.map(w=> <div>{w.word}</div>)} ) }
</>
);
}
export default GetWordsWAxiosNLoading;
The error I am getting is :
./src/GetWordsWAxiosNLoading.js
SyntaxError: use_effect_react_hooks_demo/use_effect_initial_demo/src/GetWordsWAxiosNLoading.js: Unexpected token (27:59)
25 | return (
26 | <>
> 27 | { isLoading? (<div>Loading . . . </div>) : ( {words.map(w=> <div>{w.word}</div>)} ) }
| ^
28 | </>
29 | );
30 | }
At line 27 above it is giving both a Line 27:60: Parsing error: Unexpected token
& a SyntaxError
.
I have working variants of the above :
- where I am just using
fetch
instead ofaxios
httpclient (https://github.com/mrarthurwhite/use_effect_react_hooks_demo/blob/master/use_effect_initial_demo/src/App.js), & it works fine now. - where I am using axios but without a
loading
variable ( https://github.com/mrarthurwhite/use_effect_react_hooks_demo/blob/master/use_effect_initial_demo/src/GetWordsWAxios.js) & it works fine now but it was also giving errors withwords
being undefined initially.
The issues are:
- there are no console log outputs
- the
isLoading
variable is undefined (I was initially usingisLoadings
a variable stored in thestate
object but decided to simplify it).
Any ideas as to what could be going on?
Thanks in advance!
33