Category "reactjs"

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

Unable to resolve empty-module.js react-native and metro-cli

I've switched over from a windows dev environment to a linux environment and I'm having trouble getting react-native app going again. The application builds wit

How can I redirect the parent page after OAuth 2 flow is complete?

My current flow is such: User clicks login to third party Upon grant, the third party redirects to configured redirect uri with code Forward code to backend to

React hooks documentation generator

What is the best way to generate documentation for React hooks in .jsx and .tsx files? I tried TypeDoc, but I do not get any comments from function methods. c

MERN Application - Problem with notifications and mapping array

I'm on a MERN stack to create a chat application. And when I'm trying to display notifications when there is a new message in another chatroom or a new PM I'm h

BotFramework-WebChat - Adaptive Card

Is there a way to add Onchange event to the adaptive card input field that is rendered in webchat (version V4). Example changing a quantity value (Adaptive card

Firebase google signin authentication and popup is not working in React project

Actually I'm don't know a firebase just follow a react course and my instructor uses the same code but it's not working from my side... I have enabled google si