How can we dynamically change the properties of a CSS Class in ReactJS. For example, I have several text fields with CSS Classname “important”. I want to change all of them to have flash a red background on click of a button. I thought I could do this by changing the properties of that CSS Class. …
Tag: reactjs
How to add debounce to useElementSize hook?
I am using the following hook in order to get the width and the height for an element: It works perfectly – when I resize the window I see that the component re-renders every time I resize and it happens very fast. The problem is I have a very big element and I would like to add a debounce to
Why is my component in React being called multiple times?
I am having an issue where my Listings component is running twice and I only want it to run once. I tried adding a counter below that would only run the code that grabs the data from the backend once but that did not work as you can see below it is still looping through the “grabListings” Function…
how can you set a dynamic list in react?
I have a list like this My problem is, I want to set the maximum days of the list from a configuration so sort of like this I know this seems an easy thing to implement but Im new to react and cannot seem to find a similar question. Thanks Answer A common way is to use Array.prototype.push to populate
How to use react-phone-input-2 with Typescript
I am new to Typescript but I’m forcing myself to program in it because they say it is “best” practice and beneficial in the long run… so now I’m trying to use react-phone-input-2 https://www.npmjs.com/package/react-phone-input-2 The example on the page above is for just standard …
Issues with an Array.forEach [duplicate]
This question already has answers here: JavaScript: Difference between .forEach() and .map() (17 answers) map function not working in React (3 answers) Closed 22 days ago. Hope someone here would be able to help me out. I am trying to build an Owl-Carousel from an array of objects. but for some reason the arr…
Change number format and get it as a number
I am using MUI and Formik to create form. I need to change numbers format in the all inputs: 1000.00 -> 1.000,00 A created function formatNumber(num) to do this, it works. But problem is that it returns string, and my API wait number (I can do nothing with that). I tried to use react-number-format but it a…
How to change the color of font everytime the value change?
I just want to ask if is it possible to change the color of the font when the value changes ? just like how trading platform works it will ticks the font . It changes the color from white to green ( when the value goes up and ) so I want to change the color of failed to red
Accessing button using ref
I’m not able to access the button using ref. Below is my code sample, In I keeping the undefined for completeSubmissionButton. I’m not sure what’s the solution for it. Answer You can’t provide a ref to React component ,ref only work in a native html element so you need to pass your But…
react-google-maps/api Remove need to hold ctrl to zoom
I’ve setup a map in my react app with react-google-maps/app, but there’s something that’s annoying me. To zoom the map with the scroll wheel, you have to hold down the control key. Is there a way I can disabled this so that I can zoom without holding control. Is there a way to do this? Here&…