Parsing error: expression expected, why does this occur error and what version of TypeScript is necessary?

529 Views Asked by At

I am trying to create a Context Provider using typescript and running into a parsing error that I am struggling to find an explanation for.

My code looks as follows:

The goal is to pass several items through the context provider like so:

export const StateContextProvider = ({ children }: Props) => {
   
  const [results, setResults]=
    useState<Array<EnumType>>();

  const [greenStatus, setGreenStatus] =
    useState(new Set<EnumType>());
  const [redStatus, setRedStatus] =
    useState(new Set<EnumType>());

  const [searchTerm, setSearchTerm] = useState<string>('')


  const greenValue = { greenStatus, setGreenStatus };
  const redValue = { redStatus, setRedStatus };
  const searchValue = { searchTerm, setSearchTerm };


    const getResults = async () => {
      const axios = require("axios");

      const options = {
        method: 'GET',
        url: 'https://google-search72.p.rapidapi.com/search',
        params: {query: 'rapidapi', gl: 'us', lr: 'en', num: '10', start: '1'},
        headers: {
          'X-RapidAPI-Key': 'SIGN-UP-FOR-KEY',
          'X-RapidAPI-Host': 'google-search72.p.rapidapi.com'
        }
      };
      
      axios.request(options).then(function (response: { data: any; }) {
        console.log(response.data);
      }).catch(function (error: any) {
        console.error(error);
      });

    };


  return (

    <StateContext.Provider value={{ getResults, greenValue, redValue, searchValue }}>
      {children}
    </StateContext.Provider>
  );
};

getResults is an async function and the main thing that I am having issue with.

I have declared the interface like so:

interface ContextParametersType {

  greenValue: { greenStatus: Set<EnumType>, setGreenStatus: Dispatch<SetStateAction<Set<EnumType>>> };
  redValue: { redStatus: Set<EnumType>, setRedStatus: Dispatch<SetStateAction<Set<EnumType>>> };
  searchValue: { searchTerm: string, setSearchTerm: Dispatch<SetStateAction<string>> }
  getResults?: () => Promise<void>

}

This is what I have done to declare my default values:

const StateContext = createContext<ContextParametersType>({

  greenValue: {
    greenStatus: new Set<EnumType>(), setGreenStatus: () => {
    }
  },
  redValue: {
    redStatus: new Set<EnumType>(), setRedStatus: () => {
    }
  },
  searchValue: {
    searchTerm: '', setSearchTerm: () => {
    }
  },

  getResults?: async () => void
})

The error occurs in this final function when I try to initialise the getResults function:

Parsing error: Expression expected.eslint      

What does this mean, as far as I am aware I am not using eslint and the typescript version is 4.8.4.

Thank you!

1

There are 1 best solutions below

0
Kevin On

It is because of a syntax error:

Here it the correct syntax anyone for else:

 getResults: async () => {}

exchange void operator!