The component will not render. I tried to start a new project and still didn't work. Is there a way to resolve the issue or do I just wait for an update from the origin repository.
Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (react.development.js:1476:1) at useState (react.development.js:1507:1) at WEBPACK_DEFAULT_EXPORT (SwitchSelector.tsx:14:1) at renderWithHooks (react-dom.development.js:16175:1) at mountIndeterminateComponent (react-dom.development.js:20913:1) at beginWork (react-dom.development.js:22416:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1) at invokeGuardedCallback (react-dom.development.js:4274:1) at beginWork$1 (react-dom.development.js:27405:1)
My Code taken from the repository (https://www.npmjs.com/package/react-switch-selector)
import React from "react"; import SwitchSelector from "react-switch-selector"; const Toggles: React.FC = () => { const options = [ { label: <span>Foo</span>, value: { foo: true, }, selectedBackgroundColor: "#0097e6", }, { label: "Bar", value: "bar", selectedBackgroundColor: "#fbc531", }, ]; const onChange = (newValue: any) => { console.log(newValue); }; const initialSelectedIndex = options.findIndex( ({ value }) => value === "bar" ); return ( <div className="your-required-wrapper" style={{ width: 100, height: 30 }}> <SwitchSelector onChange={onChange} options={options} initialSelectedIndex={initialSelectedIndex} backgroundColor={"#353b48"} fontColor={"#f5f6fa"} /> </div> ); }; export default Toggles;