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 :

  1. where I am just using fetch instead of axios httpclient (https://github.com/mrarthurwhite/use_effect_react_hooks_demo/blob/master/use_effect_initial_demo/src/App.js), & it works fine now.
  2. 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 with words being undefined initially.

The issues are:

  1. there are no console log outputs
  2. the isLoading variable is undefined (I was initially using isLoadings a variable stored in the state object but decided to simplify it).

Any ideas as to what could be going on?
Thanks in advance!

37

This website collects cookies to deliver better user experience