Category "reactjs"

How to toggle boolean state in React and TypeScript?

I am new to React and TypeScript. I want to toggle a boolean state (true/false) with a handler function. I've read other posts about how to do this in ES6 but

React Testing library custom setup import test-utils: module not installed. Unable to resolve path

I'm trying to configure jest absolute path for my custom test-utils directory (https://testing-library.com/docs/react-testing-library/setup#configuring-jest-wit

Import image dynamically in React component

I have an Articles component that shows a blog page with listed articles. render() { const articles = { ...this.state.articles } const art

React strict mode breaks application in development with OAuth

In my OAuth flow, the token can only be called once, then it 404's. In React strict mode, it renders my component twice, which invokes a call to my back-end. Th

MUI - How can I style the scrollbar with CSS in JS?

I really hate having to have an external stylesheet for my scrollbar stylings and I want to put it in with the rest of my styles on my root component. I have tr

getFieldDecorator rules for password to contain lower case upper case letters and numbers?

I am working on a react app and the views are built with Ant Design, I am validating a form and I don't know how to validate the password to contain chars of lo

Next.js document is not defined trying to implement locomotive-scroll

I'm trying to implement Locomotive Scroll in my Nextjs app, and I'm having trouble... Here's my code: import type { AppProps } from "next/app"; import { useEffe

Absolute path not working in Vite project React TS

I'm struggling to get absolute path to work in a Vite react-ts project. Here's how I created the project npm init @vitejs/app npx: installed 6 in 1.883s √

Restructuring the object using different name [Object manipulation]

I have a use case where I have to restructure the object. Initial I have this object { name: 'Tommy Kerar', mandatoryRequirements : [{ name:

Error: {"data": "foreach() argument must be of type array|object, string given", "message": "" in React Native

i have to send this Array object to the API when i post the API data it shows me this error: Error: {"data": "foreach() argument must be of type array|object,

How to render conditional with classNames with Reactjs

I am trying to use classNames to replace the conditional below in one line. My problem is that i am not sure what is the right way to write the code because of

WearOS support for PWA

I'm digging over internet on how to make a PWA app made with react.js run over WearOS, but I do not find any article. Also, the WearOS website is empty of infor

How to enable pop-up iframe work on same page in react nextjs app

I have a pop-up that works very well in my vanilla Html app properly, that is, when the button is clicked, it opens the pop-up and everything works fine. The is

Create ref to external class component inside functional component in React

I would like to use react player library in my app import React, { useEffect, useRef } from "react"; import ReactPlayer from "react-player"; import { useSelect

TypeScript and React - children type?

I have a very simple functional component as follows: import * as React from 'react'; export interface AuxProps { children: React.ReactNode } const a

How to use this Javascript animation in React.js

I have the code below and I'd like to know the best way to make it work in React.js. My main issue is that I can't comprehend the object orientation principle i

async await fetch api data in react

I am trying to fetch data from an api on component load in my React project and have redux-thunk applied but I am getting the error uncaught Error: Actions must

I am trying to create widget in next.js app

My website is almost complete on next.js. I am trying to create widget to one of my component that can be embedded on any website without iframe. Please help me

React extension is missing in Dev tools

I am trying to get my react extension working for local development, but "Components" and "Profiler" is missing in the Chrome developer tools. This only happens

FullScreen: TS2769: No overload matches this call. Overload 1 of 2

I use the FullScreen component from https://www.npmjs.com/package/react-request-fullscreen in my React TS app. This component was working properly for around 1