Category "reactjs"

React Auto Complete Element along with options to add value to the list if not present

i have to create an autocomplete react component. Initially there must be 5 autocomplete fields. I set a state as an array of 5 input elements like this.state

React .map not re-rendering

I'm building a sorting algorithm visualizer, and in my return, I'm creating divs to represent vertical bars, in animatedBubbleSort() I'm swapping values in the

How to verify the token and get score using react-google-recaptcha-v3?

I'm using the library react-google-recaptcha-v3 in order to integrate reCAPTCHA v3 into my React application, which also uses Next. There's the following exampl

How to mock react custom hook returned value?

Here is my custom hook: export function useClientRect() { const [scrollH, setScrollH] = useState(0); const [clientH, setClientH] = useState(0); c

How to fix React Apex Chart initial mount delay?

I am using React Apex chart library in my project.I've figured that the library charts have a small delay before rendering on initial mount. This issue harms th

How to add dynamically created input field values to a use state array?

Continuing troubleshooting from Adding data to array using UseState onChange Hi, i am trying to make a button, that adds a new input field, then, when i click a

Why is localStorage getting cleared whenever I refresh the page?

Like the title says, the localStorage I set registers the changes made to the todoList array and JSON.stringifys it; however, whenever I refresh the page the ar

How can I get a React application to send SQL queries to an Oracle database and retrieve results?

Background: I need to create a web application that connects to an Oracle database hosted by my university through a VPN. The app does not have to be hosted onl

ACE Editor Autocomplete to open on `.`

If you enable live autocomplete, the tooltip opens up as you type things. However, it will never open up on pressing . until you type something else after. So

useState vs. useEffect - setting initial value

I have two basic questions about React: In order to assign an initial empty value to a piece of state (let's say player) in a functional component, are the foll

Link tag inside BrowserRouter changes only the URL, but doesn't render the component

I am building a Netflix clone application, and I am using react-router-dom v5 to switch between different pages. However, when I click the Link tag in Navbar.js

how to add external library to reactjs?

what are the various options to add an external JS library to reactjs component? for example, if we have any library file such as example.js and it is used by o

Suggestions for rate limiting using Axios

I'm using react with axios for accessing api from cryptocompare. Api has limit of 15 call per second. Now after 15 api call I'm getting error of "Rate limit e

Remove Y Axis and its grid lines

Im using react-google-charts This is my chart code <Chart chartType="Bar" loader={<div>Loading Chart</div>} data={[ ["", "Credit", "D

grid-template-columns is not working in React 18

Major Update to the Question(7th May): When I am using my arrow keys, I could see all of the three cards but still the same is as big as it doesn't fit on the s

How to redirect to external url onClick? in React

I'm using react-router which means i'm storing routes in app.tsx file. I have cards components that need to redirect to an external url onClick. So my question

Difference between Ant Design form.setFieldsValue and initialValues prop

As the title states. What is the difference between the two? 1. import { Form } from 'antd'; const Components = () => { const [form] = Form.useForm(); f

using react router with next.js

I am learning how to use Next.js/React for my application. I am currently researching the topic of routing and I had a few questions. I know that you can use re

js chunk being served with wrong mime type in react app

I have a react app (with routes handled by react-router) with some components lazily loaded deployed on heroku(free plan), it is served by this express server:

Show total number of selected filters array of items in React

I have the following problem. In widgetFilters array (length===3) i want to show the numbers of selected items in the header of the Filter. const [selectedFil