How to handle this error in react js Error: useNavigate() may be used only in the context of a <Router> component. ▶ 3 stack frames were collapsed. Navbar C:/Users/dell/OneDrive/Desktop/ReactJs/react-learning/src/components/Navbar.js:9 6 | import { Routes , Route , useNavigate} from "react-router-dom";…
I'm new in to build a web with React Libray, and use next.js with typscript to create the web app. And I'm trying to build a todo list web app. I create an interface for collet the list data like…
I should start out by saying I'm pretty new to React. When a component mounts, I need to fetch an API endpoint, and assign the JSON response to state data. Ultimately, I need to pass the JSON response to another…
All I'm trying to do here is to be able fetch paypal_api_key from backend api something like: app.get("/api/keys/paypal", (req, res) => { res.send(process.env.PAYPAL_CLIENT_ID || "sb"); }); frontend side: const loadPaypalScript = async () => { const { data: clientId }…
Considering such code below: const [list, setList] = useState([]); const [curPage, setCurPage] = useState(0); const fetchItem = useCallback(async ()=>{ const data = await callAPI(); // data is an object setList(prev => [...prev, data]); },[]); useEffect(()=>{ if(list.length - 1 < curPage)…
I have a banner a follows: I need to display Title on left most side and icon on the right most side. Here is my code: <div className={classNames.root} role="banner"> <div className={classNames.left}> Title </div> <div className={classNames.right}><SettingsIcon /></div> </div> root: [ {…
hello friends please I am using the styled component for my react project and have been stuck for days now while trying to add a hover effect to the icons in my header component. i would appreciate if anyone can…
In my react with typescript project, I'm using the Formik component alongside Yup validation schema to validate an address form. At the moment, it work fine for an existing user, because the initialValues are populated with valid data. Also, it…
The following is my component where the props data getting updated when the searchItem() has been executed. I can't understand why this is happening. How can I fix this issue? const DefaultTabGroup = ({data}) => { const [res , setRes]…
I have the following code from my React component: <div className="mainApp"> <div className="pkgsList"> {pkgData.map((p) => <h3 key={p.name}>{p.name}</h3> )} </div> </div> ) In this case, pkgData is an array of objects which try to describe a package in this scenario. Each…