Category "reactjs"

How to make redux function call on radio button click react native?

I am working on project of Food app. I have preference screen where user can click on any desired preference to add in order. This is working but I want to disp

How do I render components with different layouts/elements using react-router-dom v6

I am having trouble writing code to render a login page with no navbar and sidebar. I have come across some pages that ask similar questions but none seem to pe

Using Websocket Channel in React

I am working on a project where I have to make an api call to a websocket, and display certain information based on that call. As you can see I have used the su

Webpack Hot module replacement, react 18 ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before

I updated React to v18 and my Webpack dev server gives me a console error whenever the hot module replacement fires and injects the new javascript code: Warning

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