Category "reactjs"

React: filtering a todo list based on button clicked

I'm new to React and currently working on a to-do list app. Currently, I'm able to add, delete and edit the to-do list. I have a problem filtering my to-do list

Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code

I am running a react application and it shows the following error: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in yo

A fool-proof tsup config for a React component library

I've never published an NPM package before. All these details to generate a package seem way too complicated to my level. The only tool, that was beginner frien

Error: Objects are not valid as a React child. When i use a child property

I am getting this error in my react app: Error: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

How to maintain global states created dynamically

I am trying to Display list of items with then name and button to download its respective file Same list are available in different other screens. When I click

How to implement multiple api call in a single query with RTK query

I'm new in RTK Query and I'm struggling with a use case I have to implement. Scenario: I have to merge the results from two API calls: the first API call is a p

Values in Hibernate

I want a row in hibernate that only takes ("yes","no"," "), how can I map it? Something like an ENUM type in SQL but mapped in Hibernate

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