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!

Comments

[mrarthurwhite]

So I found the error. It was not obvious but it was apparently this bit of code :

return (
    <>
    { isLoading? (<div>Loading . . . </div>) : (     {words.map(w=> <div>{w.word}</div>)}    ) }
    </>
  );

The above ought to not have any curley brackets {} around words.map apparently. The correct expression is:

  return (
  <>
  {isLoading ? (
    <div>Loading . . . </div>
  ) : (
    words.map((w) => <div>{w.word}</div>)
  )}
   </>
  );