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!
It is because of a syntax error:
Here it the correct syntax anyone for else:
exchange void operator!