Category "reactjs"

Converting a splitted objects of object to array of objects

I have this form of data coming from an API and I want it to convert into different structure in JavaScript . [ { "1": { "id": 1, "coinname":

Changing theme type with MUI createTheme, palette type

In createTheme function on MUI, in the palette section there is a "type" option. I have created two different palettes with type options dark and light as you c

Using ImmerJS to update child (by id) within a parent (by id)

How do I update the content of child12 using immerJS const [fields, setFields] = useState([ { name: "Parent 1", id: "parent1", child

TypeError: this.props.navigate is not a function

I am new to React.js and I am getting following error "TypeError: this.props.navigate is not a function" while calling this.props.navigate(/todos/${id}) in upda

Fullcalendar Event Drop in modal not working

I have problem with editable fullcalendar eventdrop in modal dialog if another FullCalendar is in background. Modal with second calendar open after click on eve

Decrypt AES 256 CBC using crypto-js

i have the following key to decrypt erUF9SRCNQZPCBezVGzYYnUVgwAKZTvXzS5Zhgw6B/4= into "54545fwfwefweffvfdv", I tried searching for similar question but the lack

How to add an active class to an active Link in react router dom v6.3 using styled components - ReactJs ^18.1.0

I have designed my NavLinks using the styled-components. I want to add an active class to the active link I am unable to do it. I tried the isActive property bu

How to check if time overlaps in javascript

Hi i am working on Reactjs Application where user needs to select four time slots .Like slot1 starting time, slot2 starting time ,slot1 ending time ,slot2 endi

Can I extend components of this type - PaperTextInput.Icon or Tab.Navigator when using styled components?

I've been trying to extend components like PaperTextInput.Icon or Tab.Navigator but have been failing and I'm wondering how am I supposed to extend them? What I

Recharts 100% width is not working in Nextjs / Reactjs. It is not occupying the entire width and also act like a block

I am using Recharts with Next.js and Tailwindcss, I copied a barchart code snippet in Recharts to create my own barchart too. I have to change the height to asp

TypeError: undefined is not an object (evaluating 'navigation.replace') in react native

I am using bottom tab navigator for my app in which I have used stack navigation for each tab. I have one notification icon on header on click of that I navigat

how set Scroll to the top of the page after page change?

I have a problem, which I have no idea about. when the user changes the page the user stays at the bottom of the page. I want to take the user to the top of the

getting error " Plugin "react" was conflicted between "package.json » "

F:\\React tutoria;\\tut-3\\my-app\>npm run build [email protected] build react-scripts build Creating an optimized production build... Failed to compile. Plugi

How can I use a React context variable when initiating i18next interpolation?

The React app I'm working on is using react-18next. Inside the index.js file, there is a i18n.js file imported into it that configures and initiates i18n. This

Cache manegment in recoil js

I decided to try using recoil instead of redux and ran into the problem of caching mutable collections. To be more precise, the problem is not in the response c

React build suddenly fails inside Docker image

This error is only happening inside a Docker image build: TypeScript error in /app/src/index.tsx(12,10): 'Provider' cannot be used as a JSX component. Its ins

Conditionally render component views based on browser screen size

I have three different components representing different views for screen sizes. I want to render one of them based on the browser view width. I've managed to g

how to switch between inputs in converter app in react?

I built a celsius(as input) to fahrenheit(as output) conveter with react But I want to switch between celsius and fahrenheit as input and output I mean when I c

How do I find out the aria role of MUI components for RTL querying?

I've just started migrating from enzyme to react testing library on my project that uses material-ui. From what I understand, RTL queries the dom and the recomm

Metro has encountered an error: While trying to resolve module `@apollo/client`

I am trying to install GraphQL into my React Native app and in doing so, I was given this error message. I have confirmed that the file actually exists and have