Category "reactjs"

Include reference to TypeScript library in Jest config for another library

I have a shared typescript library that exports a function being used by a react library. Everything works at runtime, however when running the tests for the re

React Antd: How to remove spacing between vertical divider and any content right next to it?

</div> <Divider type="vertical" style={{ width: "5px", height: "auto" , marginRight : '0px' , padding : '0 0'}} /> <div style={{ padding : '0 0'

Reactjs firebase google authentication showing project id instead of Public-facing name

In my reactjs project, I use firebase 9.6.11 for email, google and facebook authentication. When I call the signInWithPopup() and google sign in form, Sign in t

Override Mantine styles to only one element

In my React project, I am using Mantine's library accordion in two different components: Search.jsx and Profile.jsx. The point is I need to accurately customize

react-xarrows not updating lines in position

There are some issues I'm having while using the react-xarrows with mui. I'm trying to achieve: The line should be connected in the same position after toggling

sort .map data in react js (show latest date on top)

I am trying to sort data according to date where the latest date must come at top of the list let mapped = predefined.reduce((r, a) => { r[a.date] = [...(

AnimatePresence causing 'Uncaught TypeError: Cannot read properties of null (reading 'useRef')'

When trying to implement framer-motion into my project I get the following errors in my console and nothing renders on the page. Warning: Invalid hook call. Hoo

Serve ReactJS + PHP on Ubuntu Server

I am working on my first web-project and therefore have an Ubuntu machine with apache2. I am quite new to web development and have never deployed a website befo

My React component is re-rendering, cannot figure out why

I'm building a React App with Firebase and my component is constantly re-rendering. I tried some things that didn't work (because they couldn't work, like setti

Filter by date using React Hook

There are 2 methods of filter by date and by letters , they should work together and separately. 2.I thought I can combine them , but nothing happened and tried

React js ecommerce price change when size and material variants option selected

I am trying to get the final price in the productInfo page when the material and size variants options are selected. In the data.js: export const productItems =

How to get component loaded state in Next.js?

I am working on a simple Pokedex that shows all pokemon, I am displaying all the cards by using a map function on an array of pokemon objects like this: {pokemo

How to test a component that has a conditional to be displayed?

I am trying to test a component with jest and react-testing-library that contains a conditional to be displayed. export default function CloseCollaborator

TypeError: doc is not a function at addSubCollectionDocument

I'm trying to add a new document to a non-existing sub-collection in a document(solutionsCollection/docID/commentsSubCollection). But I'm getting this error mes

Change language in DatePicker Ant Design

I have some problem with change language of month and days in my DatePicker from Ant Design. I want my DatePicker looks like this: want I try to use this https:

Modifying Schema only for one document

I'm creating an application in the MERN stack and I stumbled upon a problem. I will start by explaining how that app is going to work. So, in that application u

In React Like Button Count is not Updating

Here, I'm getting data from API in array of objects format. i'm showing each object data in a section, for that each section i need to add a like button. Defaul

Fixing Layout by Removing Spaces of React Grid Layout When Set Compact Type Null

I am using react-grid-layout package for my layout design. I want to use compactType=null configuration for free items moving on the layout. But when I change t

How can i position a logo image from a list react component?

i would like to find the way to position the logo images like it looks here enter image description here I couldn`t find a way to position multiple logo images,

Capture Errors From Embed/Iframe

So I'm building a React application for a client and they want me to find when a user is not authenticated, and redirect to a different site. When the user is n