Category "reactjs"

How to fetch data only on first click via react-query and then disable refetch on subsequent clicks

I encountered a problem while implementing the form where the data used in select, retrieved from the database via react-query, should only be retrieved once wh

How do I serve a React-built front-end on a FastAPI backend?

I've tried to mount the frontend to / with app.mount, but this invalidates all of my /api routes. I've also tried the following code to mount the folders in /st

How to render jsx calling non component function in React?

I adding return before jsx but it stops iteration function App(){ function recursion(object){ for(let key in object){ if(typeof object[key] === 'ob

useState value not rendering in DOM

I am an absolute beginner with React, I have a component where I need to render the value of a state to the Dom but it doesnt work let me show you my code. Link

Yup (with formik and react) - Can't validate array length

kinda new to Yup and I can't figure out how to validate that an array is not empty. I'm using react + formik + yup + material-ui here is an example I've created

Using React to reset the size of a div with CSS resize enabled

Currently I have a resizable div using resize: both; in its CSS. I'd like to make a function to reset the div back to its initial percentage-based size. I got t

<Link> does not work as expected in NextJS

I am working on creating a Next.js app and part of it requires me to create a dynamic route on click of a card component. However, after wrapping my Cards with

Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reached

This morning when running npm start, I get the error: System limit for number of file watchers reached Because /proc/sys/fs/inotify/max_user_watches has return

Cannot resolve symbol 'Routes'

I am importing Routes the following way import {Routes, Route, BrowserRouter} from 'react-router-dom' My package JSON is "react-router-dom": "^6.0.2", I am us

how to use .env file in a react js with typescript project?

I have a react js project , but with typescript. I understand we can create .env file and have some configuration defined as such, .env file REACT_APP_SOME_CONF

How to show a popup modal on page load in React js functional component

How to show a popup modal on page load in React js functional component.basically when the page loads the popup or modal should be visible automatically without

How to update mkdir in order to install express-generator without warnings?

I was going to install express-generator on windows computer. I used thisnpm install -g express-generator command in cmd and it gave me thisnpm WARN deprecated

What is wrong with my reselect function ? I dont get an output

I want to use reselect. I want to get my shopping cart by the ids. reselect.ts import { createSelector } from "reselect"; import { RootState } from "../store";

React-Query Prefetch query doesnt return value?

const getQueryService = () => { return { login: async (id): Promise<AuthLoginGoogleResponse> => { try { const result = await aut

Cookie “_ga” will be soon rejected because it has the “SameSite” attribute set to “None”

I have added Google Tag manager to my react project, with the help of react-gtm-module After successfully adding it, I see some warning in consoles which are be

"Uncaught TypeError: inventories.map is not a function".?

After deleting an item from the database and updating the UI with hook, I am getting this error saying "Uncaught TypeError: inventories.map is not a function".

Can’t write scripts in react

So, I’m making a website with react&remi.js , and everything is set up and ready to go just one thing, I can’t use javascript functions and stuf

React-router-v6 access a url parameter

How can i access url parameter in my react component ? App.js <Route path="/question/:id" element={<QuestionView />} /> QuestionView.js class Quest

React App adding Pure CSS to Tailwind CSS

I need to do this in tailwind CSS for my react application. How can I do that? HTML <h1>Show / Hide Animation with pure CSS</h1> <label class="t

filter operator explained step by step

function deleteTask(id) { const remainingTasks = tasks.filter((task) => id !== task.id); setTasks(remainingTasks); } Ijust want to know in plain english, as