Category "reactjs"

How do i get the values of object in arrays react js

Object { rows: (1) […], count: 3 } ​ My api is giving me this count: 3 ​rows: Array [ {…} ] ​​0: Object { ELIGIBILITATE: "

Testing react component that uses Context - change state of component under test

I want to test the following React component import React, { useContext, useState } from "react"; import { IntlProvider } from "react-intl"; export const Conte

Self Hosted Font in material-ui theme component library not working

I'm building a component library to sit alongside some react apps within a monorepo, library is currently being consumed by app1 and displaying components expor

ui-kitten for react native web

I have successfully implement the react native web support in react native project. And i have install the @ui-kitten/ library. but when i run in the web it giv

SCSS variable export not imported in React

After a general package upgrade on my React project, SCSS variable imports in JavaScript stopped working. Imports themselves are still working, but variables ex

How to conditionally mock error responses with msw

The UI I'm working on is rendered differently based on the response received. I would like to test the UI when a 4xx and 5xx responses are received. My api hand

HOC with functional component

I'm trying to make a simple HOC (Higher Order Function) with a functional component IN React.js. I have done the following, and it's compile, but nothing is sho

React: How to pass a pointer to one component to a second component

How can you pass a pointer to component 1 to component 2 (so that you can work with component 1 inside component 2, e.g. get its properties) <Component1 />

How to Inject new element in SlateJS Editor DOM

How to inject new react component/element into SlateJS Editor DOM? I want to inject a new element within the SlateJS editor's DOM, not above or below. Most of S

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: