Category "reactjs"

Equivalent of scss @import for styled-components?

I'm making an embeddable widget with react and styled-components, and want to do a big CSS reset in my main app container. I'm going to use the styles from clea

ReferenceError: ResizeObserver is not defined with nivo and NextJS

I want to use nivo with Next but when I load the page containing a pie chart made with nivo, I get this error: ReferenceError: ResizeObserver is not defined. My

Unable to setup NIH's Medical Condition API (with Auto-completion) in React App

I am building a react app right now and one of the features allows users to look up medical conditions. I'm trying to use the NIH's open-source API with their a

How to style react styled components using classNames

How to style a styled component based on the class name it has. I found the following implementation through some blogs, but this isn't working. Can someone hel

Why getStaticProps giving error of "Failed to load SWC binary for win32/x64"?

I am using getStaticProps() in a Next.js app but when I run the app it gives ERROR:- warn - Attempted to load @next/swc-win32-x64-gnu, but it was not installed

How can I change the child component state from parent when the parent passing the same value to child continuously?

Here is my code: Parent.js import { useReducer } from 'react'; import Child from "./Child"; let reducer = (state, action) => { let result = { ...state };

My delete function will not work using react frontend but backend are okay its working

I'm new to React. I am working on a react application that communicates with a MYSQL database. When i open the application I get a list of all the students who

How can I change the focused color of a TextField?

I am making use of Material-UI React library and I need to change the border color of a TextField when it is clicked or focused as the case maybe. Here is what

react-query - How can I access my queries in multiple components?

I'm just beginning with react query and used it to get a list of books from the server using useQuery in my ListBooks Component const { data, error, isLoading,

Configuring tsconfig.json and eslint for a monorepo using Yarn workspaces

I'm using a Yarn workspace monorepo structure in a TypeScript React project: packages admin package.json user package.json package.json // Workspace

how to create deep paths in a tree structure in react-router v6

Here is a codesandbox that illustrates the problem: If I have a tree of objects like this: const tasks: Task[] = [ { id: 1, name: "one", children:

Uncaught TypeError: dispatcher.useSyncExternalStore is not a function

i am trying to change the state of bulma model using useSelector and useDispatch like this const isState = useSelector((state) => state.isActiveState

React-Router-Dom <Link /> tag is changing URL but not rendering the Component

Header Component import React from "react"; import { BrowserRouter as Router, Link } from "react-router-dom"; import { ReactComponent as Logo } from "../../asse

React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function

React Hook is not working, giving error as attached screenshot:- My Code:- import React, { useState} from 'react'; import WEBINAR_LIST from './webinar_data';

React-Phone-Input-2 customize border of input on focus

I would like to change the color of the border of the input on focus, but not sure how to achieve it. I can change the styles the component but not when focusin

react js send object to node js

I send the object to the backend(Node js) when API call. but I check objects using console log. I checked using POSTMAN. When I checked POSTMAN, I worked very w

react-spring parallax not working on refresh

<Parallax pages={2} ref={ref}> <ParallaxLayer offset={0} speed={1} factor={2}> <Snowfall snowflakeCount={35} color={'#53bdfc'} />

Test correct SVG component renders with jest and react-testing-library

I have an svg inside a React component that renders conditionally. <div className='avatar'> {gender === true ? <MaleAvatar /> : <FemaleAvat

Draw line between 2 elements in reactJS

I'm working on a flights agency website, and at some point I need to draw some lines between elements that are being added dynamically. See the image to underst

How to configure NextJS Server API GraphQL Subscription

currently i'm learning how to develop an application using graphql. I'm facing the error of implementing the subscription inside my application resolver.js cons