Stack Overflow
Stack Overflow

Questions tagged [controlled-component]

89 questions
13
votes
5 answers

How to stop cursor from jumping to the end of input

I have a controlled React input component and I am formatting the input as shown in onChange code. And…
abhi
  • 349
  • 2
  • 8
  • 24
9
votes
9 answers

How to dynamically update the value for any input field with one event handler function, using hooks

TL;DR Is there any way to dynamically update the value for input fields with one event handler function like we could do with stateful component. I am working on a login form with 2 fields. Email and Password. When i am using 2 useState…
Rakib Uddin
  • 880
  • 1
  • 6
  • 17
7
votes
6 answers

React: Warning, a component is changing an uncontrolled input to be controlled

I'm using Google maps address autocomplete in my React app. It works by hooking into an input element, watching for changes, and providing a dropdown location select. Relevant code:
Nathan
  • 73,987
  • 14
  • 40
  • 69
7
votes
5 answers

React warning MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized

I'm trying to render a mui Switch component with default checked value. But it isn't working and i'm getting the warning. MUI: A component is changing the default checked state of an uncontrolled SwitchBase after being initialized. To suppress this…
Shreyas Jadhav
  • 2,363
  • 4
  • 10
  • 23
5
votes
0 answers

Controlling Carousel with Links React-Bootstrap

I'm trying to control a Carousel from Links in a NavBar. What I have right now is a click method in the HomePage component (the parent component of both the NavBar and Carousel) that updates the state of the currently selected index based on which…
Daniel Kim
  • 51
  • 3
5
votes
1 answer

Lit-elements, the idiomatic way to write a controlled component

I'm working with lit-elements via @open-wc and is currently trying to write a nested set of components where the inner component is an input field and some ancestor component has to support some arbitrary rewrite rules like 'numbers are not allowed…
tugend
  • 133
  • 13
4
votes
1 answer

In a controlled React number input, how can you trim leading zeros?

In the React docs it says that in a controlled component, "the React state be the “single source of truth”". This seems to be true except in cases with leading zeros. In the below example, you can see that the input is controlled, but in a case with…
sallf
  • 2,583
  • 3
  • 19
  • 24
3
votes
2 answers

React: Pass State To Siblings

I have created a controlled component that constrains an input field to only 4 numbers. These numbers can be changed at any time and any time the number is four digits I want the result to be passed to a sibling component to action. I am sending the…
SteveW
  • 337
  • 4
  • 11
3
votes
1 answer

How to find when user stops typing in controlled components?

I am trying to capture the moment when the user stops typing in the controlled input. It happens so smooth inside the uncontrolled component. When I have tried with setTimeout, only the last character came as an input rest all were not inputted. I…
vam
  • 492
  • 7
  • 17
2
votes
0 answers

How does event.target.value work in React controlled inputs?

Suppose I have a react component with a controlled form input, ex: const MyInputs = () => { const [val, setVal] = useState("") const handleChange = (event: ChangeEvent): void => { setVal(event.target.value) // what is…
Aaron Parisi
  • 464
  • 7
  • 15
2
votes
0 answers

react hook form doesn't reset my fields correctly

I have a controlled form with react hook form. it contains one input type search, two datepickers and one select. it only rest correctly the select, but not the other 2 elements. i declared some defaultValues, but if i specify onClick={() =>…
junray
  • 163
  • 3
  • 15
2
votes
1 answer

Is there a way to hide value from input with password in React?

I have this code for input with type="password" It works, but I noticed, that in develeopers console "Elements"you can actually see value of…
Kerchik
  • 53
  • 1
  • 7
2
votes
1 answer

React - Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

After entering the color name in the input field, when I submit the form, an error occurs : TypeError: Cannot read property 'toLowerCase' of undefined (anonymous…
Ashmita Singh
  • 69
  • 2
  • 2
  • 11
2
votes
0 answers

How to build a controlled and uncontrolled Input component in React at the same time?

I am trying to build a component that can either be used controlled or uncontrolled. Similar to how TextField in MaterialUI or Input in ChakraUI. So the component works with or without the value props. What is the best way to build this kind of…
henrycity
  • 61
  • 1
  • 1
  • 5
2
votes
1 answer

Controlled TextInput in React-Admin

Before my question is marked as duplicate, I want to clarify I know how to write a controlled input in vanilla/regular React. The issue I have now is that I expected to be able to do the same thing with React-Admin's TextInput. Using typescript…
Noah May
  • 1,049
  • 8
  • 18
1
2 3 4 5 6