Category "reactjs"

How can I apply React Router v6 and react-transition-group transition to only specific routes?

what can I do if I want to exclude some 'routes' from the transition? For example, the routes are as follows; <Routes> <Route path="/login" element={

How to add checkbox input in each row of react-virtualized table?

I have a state that whenever the user scrolls in a specific part, the data is receieved from API and appendded to the end of this state. Because the data is bi

How can I close Modal and Popconfirm of AntD when I click the OK button on Popconfirm

Recently I try to use antd. However, when I close Modal and Popconfirm components once I click the OK button on Popconfrm, it doesn't work well. It means only M

How to fix error "Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)"

I am trying to create a react-typescript app along with leaflet. I used the command, npm install leaflet react-leaflet @types/react @types/leaflet --save to ins

Requiring a child that accepts a ref attribute in React + Typescript

Using React + Typescript, I'd like to create a children prop that only accepts a single child that accepts a understands and accepts a ref attribute. Basically,

Context API using the initial value not the one set in UseState

I just started using typescript with react and tried to deal with ContextAPI with the typescript. So Far I've set a context and tried to use a provider inside m

React - How to filter a list without losing data?

I'm able to filter the list to display the items I want. The problem is, my method of filtering actually alters the list rather than just display the items I'm

Axios Uncaught TypeError: Cannot read property 'map' of undefined

I'm trying to display data from my API in a React App with Axios. I've created a simple method that connects to the REST API. import axios from 'axios'; cons

ReactNode, ElementType, JSX.Element and "Type 'Element' is not assignable to type 'false | ElementType<any>'", what gives?

I designed a pretty large UI library just to learn and also see how things move. As it grew and I had moved to TS, I realized that I could do so much more: init

How to match the borderRadius of a child view with the parent view borderRadius

Does anyone know how to fix the borderRadius issue in the following? The borderTopLeftRadius and borderTopRightRadius are set to 30 as is the borderRadius in th

Undefined Error when Fetching API using RTK Query React/Redux

I keep getting this same error of undefined data for multiple components in my data, it was working fine but for some reason it stops in fetching data and start

dispatch in redux reducer (project created by tookit)

I want to dispatch in changeCategory reducer. how should I do it? I am using create-react-app tool Thanks export const searchParamsSlice = createSlice({ name:

node_modules/@types/react/index"' has no default export

Trying to convert a React app over into Typescript and running into strange errors. node_modules/@types/react/index"' has no default export. node_modules/@type

How to style Input in material ui

I am new to material ui. I use fifth version. <InputBase ref={params.InputProps.ref} inputProps={params.inputProps}

Draft JS Header Toggles Not Working With Tailwind CSS

I am using Draft Js for Rich text editor in my react project that uses tailwind. H1-H6 have no effect when toggled on texts. The other block types (blockquote,

React-Beautiful-DnD: Invariant failed: provided.innerRef has not been provided with a HTMLElement

I was following the tutorial but I unexpectedly got this error, does anyone see what is going on? Here is the full error: react_devtools_backend.js:2557 react-

Next.js: Reduce data fetching and share data between pages

I'm looking for solutions for better data fetching in a Next.js app. In this question I'm not just looking for a solution, I'm looking for multiple options so w

How to see truncated text with hover in highcharts?

I'm using the highcharts-react-official package and sometimes my charts have texts that are long enough to be truncated. In those cases the texts end with "..."

Removing a value from an array using redux toolkit

I am new to using "@reduxjs/toolkit" (version "^1.5.1"). I am trying to remove an object from within the state's array (roundScore). This is usually something t

How can we use useEffect for multiple props value changes

How can we identify props changes in functional component?. Sample code here. Can you please help me to convert this componentDidUpdate method to functional com