Category "reactjs"

How to scroll to an element?

I have a chat widget that pulls up an array of messages every time I scroll up. The problem I am facing now is the slider stays fixed at the top when messages l

How to test Material UI v5 components with sx props in @testing-library/react?

React Testing Library does not apply sx props of Material UI components during rendering. For example, I specify properties to hide an element at certain breakp

Next.js Global CSS cannot be imported from files other than your Custom <App>

My React App was working fine, using global CSS also. I ran npm i next-images, added an image, edited the next.config.js, ran npm run dev, and now I'm getting

How to create two columns with space beetwen in react native - flatList

Hi i'm new in React Native. I am trying to create two columns layout with space beetween using react native component called flatList. Here is my view Code:

environment variable not working in react firebase config file

I am making a react app with firebase and I want to use environment variables for the firebase config. this is the firebase config in my react apps src folder i

safari react-parallax-tilt bug

I have strange bug only in safari my header container have position: sticky and when I hover items wrapped in Tilt component and scroll page down this bug happe

Apollo Graphql mutation with dynamic number of email address

I have successfully created a graphql mutation that allows me to create a Staff record. mutation addNewStaff { createStaff(input: { first_name: "Test Na

Why is the response (payment Intent) after completing the payment undefined?

myReactApp/functions/index.js const functions = require("firebase-functions"); const express = require("express"); const cors = require("cors"); const stripe =

How to setup react properly

I have been following the react setup instructions on codecademy: When I type in "npm run build" into the terminal I get this error: I can't seem to figure out

Flash Of Unstyled Text (FOUT) on reload using next.js and styled components

I'm using global style from styled components with next.js and every time I reload my page I can see the font flickering. I have my font files in public/fon

React, component not re-rendering after change in an array state

The component is not rerendering after the deletion of an element in the state but the state does change. In the component, you can add an element in the array

makeStyles in Material UI not applying

I am trying to style my pahe using makeStyles from material ui with react js. it is working for me with some pages, but most of them are not working even if I a

Why this.state is undefined in react native?

I am a complete newbie in react native, react.js, and javascript. I am Android developer so would like to give RN a try. Basically, the difference is in onPre

Can't Load Models for face-api.js

I don't understand how to load the "models" so that the client side of my React web app can start analyzing images. I don't even really understand what a "mode

Invariant Violation: _registerComponent(...): Target container is not a DOM element

I get this error after a making trivial React example page: Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM elem

Websocket error when using a proxy_pass to CRA development server using Nginx and Docker

I am trying to proxy_pass in Nginx to my React dev server at localhost:3000. It currently works but I am seeing an error in my console which I am unsure will ca

React Pagination Styling

I am using react-js-pagination npm package, but styling doesn't work for me. import Pagination from "react-js-pagination"; import "bootstrap/less/bootstrap.les

React-Router External link

Since I'm using react-router to handle my routes in a react app, I'm curious if there is a way to redirect to an external resource. Say someone hits: example.

How to get current navigation state

I am using React Navigation's Tab Navigator from https://reactnavigation.org/docs/navigators/tab, when I switch between the Tab Screens I don't get any navigati

Using Dividers inside Material-UI Tabs

If I want to use a Divider or something else that isn't a Tab inside Material-UI Tabs, I get DOM warnings in the console. <Tabs ...> //... <Divide