"Parsing error: '>' expected" while creating a functional component in React with Typescript

Viewed 1070

I am struggling to fix the syntax for a functional component in React There are several errors like :

  • { "owner": "typescript", "code": "2304", "severity": 8, "message": "Cannot find name 'div'.", "source": "ts", "startLineNumber": 20, "startColumn": 4, "endLineNumber": 20, "endColumn": 7 }

  • { "owner": "typescript", "code": "2749", "severity": 8, "message": "'GSM' refers to a value, but is being used as a type here.", "source": "ts", "startLineNumber": 21, "startColumn": 5, "endLineNumber": 21, "endColumn": 8 }

  • { "owner": "eslint", "severity": 8, "message": "Parsing error: '>' expected.", "source": "eslint", "startLineNumber": 21, "startColumn": 8, "endLineNumber": 21, "endColumn": 8 }

import * as React from 'react';
import { GSM, gsm } from './contexts/gsm';
// import { API, refresh } from './contexts/api';
// import COMPX from './contexts/compx';
// import CHARTX from './contexts/chartx';
// import PROCESSOR from './contexts/processor';

interface ISource {
 data: string;
}

interface IRefresh {
 api: any;
}

const TESTCOPY = () => {
const _sources: ISource = { data: 'api' };
const _refresh: IRefresh = { api: refresh };
 return (
  <div>
   <GSM sources={_sources} refresh={_refresh} />
   // <API gsm={gsm} />
   // <COMPX gsm={gsm} />
   // <CHARTX gsm={gsm} />
   // <PROCESSOR gsm={gsm} />
  </div>
 );
};

export default TESTCOPY;

You can also find the GSM File here :

import React from 'react';

// STATE
const default_storage: object = { data: 3, switch: null, result: null };

// VARIABLE QUI STOCK LE STATE
let storage: object = default_storage;

// DICTIONNAIRE DES REFRESH DU CACHE, paramètres : key et force.
let GSM_refresh = {
 api: (k: string, f: boolean) => {},
 graph: (k: string, f: boolean) => {}, // compute
 lts: (k: string, f: boolean) => {}, // storage
 config: (k: string, f: boolean) => {} // config
};

// INITIALISATION DES DICTIONNAIRES GSM SOURCES ET LISTNENERS
let GSM_source: object = {};
let GSM_Listeners: object = {};

interface IGSM_listeners = {

}

// COPIE DU DICTIONNAIRE GSM_REFRESH QUI INCLUE LA PROPS REFRESH = API_REFRESH
const GSM_REFRESH = (refresh: object) => {
 GSM_refresh = {
  ...GSM_refresh,
  ...refresh
 };
};

// COPIE DU DICTIONNAIRE GSM SOURCE QUI INCLUE LA PROPS SOURCES (PASSE PAR LE COMPOSANT TESTCOPY)
const GSM_SOURCE = (sources: object) => {
 GSM_source = {
  ...GSM_source,
  ...sources
 };
};

const GSM_handleReset = (e: any) => {
 // ME RETOURNE UNE ARRAY AVEC LES KEYS DE STORAGE
 let keys = Object.keys({ ...storage, ...default_storage });
 // console.log(keys)
 // ME RETOURNE UNE COPIE DE L OBJECT STORAGE
 storage = { ...default_storage };
 // console.log(storage)
 keys.forEach((key) => {
  // console.log(key)
  if (GSM_Listeners.hasOwnProperty(key)) {
   for (let listener of GSM_Listeners[key]) {
    console.log(listener)
    console.log(storage[key]); // LES STORAGE KEYS SONT : 3, NULL, NULL, 6
    listener(storage[key]);
   }
  }
 });
};

// GSM READ
let GSM_read = (varName, force) => {
 if (GSM_source[varName] === 'api') {
  // LA DATA LUE CHANGE EN FONCTION DU RANDOM NUMBER, J ECRIS UN RANDOM NUMBER DANS DATA, LE REFRESH PROVOQUE UN WRITE
  GSM_refresh.api(varName, force);
 }
 return storage[varName];
};

// GSM WRITE
let GSM_write = (varName, newValue) => {
 // J'UPDATE LA VALEUR INITIALE DANS LE STORAGE
 storage = { ...storage, [varName]: newValue };
 // console.log("gsm.write >>", varName, newValue, default_storage)
 if (GSM_Listeners.hasOwnProperty(varName)) {
  for (let listener of GSM_Listeners[varName]) {
   // console.log(GSM_Listeners["data"])
   listener(newValue); // NEW VALUE => DATA, SWITCH ET RESULT
  }
 }
};

// GSM SUBSCRIBE
let GSM_subscribe = (varName, listener) => {
 // SI PAS DE LISTENER JE CREE UNE NOUVELLE ARRAY
 if (!GSM_Listeners.hasOwnProperty(varName)) {
  GSM_Listeners[varName] = new Array(0);
  // console.log(GSM_Listeners["data"])
 }
 // SI LISTENER JE PUSH DANS L ARRAY (les listeners sont)
 GSM_Listeners[varName].push(listener);
};

// Les listeners
// {data: COMPX_data_cb, PROCESSOR_result_D, switch: CHARTX_switch_cb, PROCESSOR_result_S, result: CHARTX_result_cb, CHARTX_result_cb2}

// sources et refresh sont des props venus depuis TESTCOPY
const GSM_init = (props) => {
 GSM_SOURCE(props.sources); // api
 GSM_REFRESH(props.refresh); // provoque un right d'une value si le cache est forcé, sinon pas d'écriture.

 return (
  <div>
   <button onClick={GSM_handleReset}>Reset</button>
   <br />
  </div>
 );
};

// J EXPORTE SOURCES ET REFRESH DE GSM + LES FONCTIONS  READ, WRITE ET SUBSCRIBE
export const GSM = GSM_init;
export const gsm = {
 read: GSM_read,
 write: GSM_write,
 subscribe: GSM_subscribe
};

Thanks for your help !

0 Answers
Related