I have an array of objects in the state. The object has the order property. I need order prop for drag and drop. The list is sorted by order. Also, there is a function to remove an item from the list. How to correctly remove an element from an array with updating the order property? I wrote this solution based
Tag: react-hooks
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
React custom hook Pagination “data” is not defined
I have got an API which displays categories of music on the browser and I am trying to create a custom hook for pagination, but I keep getting this error, object is not iterable. I am new to custom hooks and could really use some help. Can anyone shed some light on how to fix this? Custom hook Pagination component
How to find out if the user has enter any value in the input field in react
How to find out if the user has enter any value in the input field in react. What I am trying to achieve is I would like to show a border around the card when the user enters the text/integer into one of the input fields inside that cards and does not click on the save button. So border should
I am trying to draw circles and add popup on a map, but i keep getting errors. Cannot read properties of undefined (reading ‘lng’)
This piece of code is from my App.js I am using this as the default location of the map once the app opens const [mapCenter, setMapCenter] = useState({lat: 34.80746, lng: -40.4796}); I use this to update the location of the map, as selected from the dropdown menu, I am getting the lat and lng from data pulled from an endpoint
REACT- Why using ‘style’ with react-draft-wysiwyg is not working?
Is there a way to delimit my textboxes in a rectangle and give a default height for them ? I tried using style in my <Editor /> but it’s not working. Here my code Answer Maybe you need to use editorStyle={{ height: 200, margin: 12,borderWidth: 0.5,padding: 10,borderRadius: “2px” }} attribute instead of style it works for me `
How to stop my component from being made twice in development
I am following this tutorial to make a javascript calendar in react I have a working calendar UI with the following code However in development, my calendar is made twice I assume this is because of React.StrictMode in development as useEffect seems to be running twice. If I run npm run build and npm start to mimic production, I only
Dropdowns are not working using react-draft-wysiwyg in React JS
I tried to use react-draft-wysiwyg using the docs Some icons are displayed but not working : block type, font, font size,pickerColor (the dropdowns are not working). For example, the font size is set to 16 by defauft, but I can’t change it… Answer Well that’s weird, I have no explanation for that but I’ve changed only in index.js: by :
REACT – Turn a selection from a dropdown to a tag label
Is there a way to turn a selection from a dropdown to a tag with the appropriate color (see the image). ItemDisplay.jsx Answer What you can do is having another Tag component that replace the dropdown each time you select an element: Ideally you should create a proper file for the Tag component and pass the selected prop to the
State Not Updating when Consuming React Custom Hook that Uses Axios with useReducer to Get Async Data
My app returns a “null is not an object” Render Error when consuming the useFetch custom hook that I made to get async data using axios. The status, error, and data properties remains the same with their default values, I don’t know if the problem is related to how I mutate my data or I’m not returning or consuming them