I have a react project configured with Vite. Hot reload works great, but I use react-i18next for multiple language support and this is my structure: When I change the translation.json files, Vite doesn’t watch it, and I have to refresh the page to see the changes. Is there a way to tell Vite to watch al…
Tag: reactjs
How to take the input from a react component and pass the length of the input to another react component
I have a textarea where I want to have an onChange event. When text is entered, I want to compute the length of the string entered and then pass it to another react component to display the character count. However, I’m having trouble passing the data into my react component. I have 3 react components i…
React Leaflet Bound not working as expected
I’m using react-leaflet package to create bound animation on the map from selected markers as seen on the screenshot below. Here is the full code: https://codesandbox.io/s/react-leaflet-marker-with-bound-869mj The map will be bound if only the selected markers change. I try to implement the bound animat…
In React.js, how can you check if prop exists before mapping it?
I have an app getting data from a websocket connection that is really fast and is causing errors with the data in state. I’m. passing an array of just 15 items into a child component, however it is an array of tuples. When I map it, I need to deconstruct each tuple to render each item. However, every 30…
React simple delete from the database – always removing last element
I have a problem when doing some React exercises with DELETING an item. When I do it like this, using axios.delete and .filter using a function deleteProduct which is activated when I confirm the action, it always takes as an id the id of the last element in list, so e.g. when I delete 3rd item, it deletes la…
Move Cursor on the string
Following the screenshot below I’m trying to move the cursor through the string which I have no idea how to do. I’m trying to achieve the effect of an old-phone UI. I’m already managed to make it blink. I’m using ReactJs and styled-components. Follow the code below: and the css file us…
Add custom style inside DataGrid Toolbar’s popup component Material-UI
I’m creating a custom Data Grid Toolbar component by modifying existing Grid Toolbar components from Material-UI. Here is the official example for the Grid Toolbar components: If we click one of the Grid Toolbar components, it will show a popup/popper as seen in the screenshot below. What I want to do i…
MFA Firebase & React Flow
I am trying to enroll a user with Multifactor authentication with Firebase following this setup guide: https://cloud.google.com/identity-platform/docs/web/mfa I am struggling to figure out how to have my function wait for the user inputted verification code after the code is sent to the user’s phone (I …
How do I use className to change appearance of html in reactjs?
I am currently learning ReactJS from a youtube tutorial and am trying to use className’s to make the page look better. The tutorial I am following only added: className=”card”> in the opening tag of a div element and it changed the page appearance though it does not seem to be working for…
Passing string from parent to render multiple children
I may lose something on the way.. I want to pass object arguments to a children to dinamically render it in three different ways. Here is my object: This is the children component: And then i have the parent component where i want to render multiple Card mapping the cards array: and then i receive this: Error…