Questions tagged [controlled-component]
89 questions
0
votes
1 answer
React Input type not able to insert any data
In my React component I have used input type; but somehow it is not going to to editable anyhow.
I have checked this post as well but not able to trace the solution.
const Index = ({
const [editable, setEditable] = useState(false)
const [email,…
TMA
- 1,419
- 2
- 22
- 49
0
votes
1 answer
Multi-nested controlled components React
I am trying to find a better way to handle all of my survey data at once. Able to have the components controlled is a good idea but I dont know if it is good practice to try to control them this way or I am just approaching this the wrong way.
This…
hunter motko
- 1
- 1
0
votes
1 answer
When using set state hooks in a text input field, React thinks I'm changing the value to undefined
So I'm running a pretty standard input form in one of my components called Start which feeds to App where it asks for the player's name. This uses React hooks to initialize a state, then changes the state onChange.
import React, {useState} from…
aa98
- 1
0
votes
2 answers
Not able to see typed text in input using react hooks and controlled components
//The value coming from the input that triggered the event is getting updated in the state but not displaying in the browser, I don't really understand what's happening, I have been using the same method to update the state in my other…
Abhishek Diwate
- 1
- 1
- 2
0
votes
2 answers
How to get multiple input fields's values in use state hook
I'm getting an error while controlling an input field which is : "A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value..." and when I try to write something in…
Saadi
- 121
- 1
- 8
0
votes
1 answer
Warning: A component is changing an uncontrolled input to be controlled (useEffect) Reactjs
export default function CitySearch() {
const defaultCity = "London";
const [city, setCity] = useState(defaultCity);
const address = useSelector((state) => state?.cityDetails?.city);
const classes = useStyles();
const handleOnChange = (e)…
0
votes
1 answer
Re-usable input file with react-hook-form logic
I'm trying to build a reusable input file as per below.
function InputFileControl({ control, name, initialValue, ...rest }) {
const {
field: { ref, ...inputProps },
fieldState: { invalid, error, isTouched },
} = useController({
…
Valery Mbele
- 3
- 1
- 4
0
votes
2 answers
React Controlled Component
import React, { useState } from "react";
function App() {
const [name, setName] = useState("");
const [headingText, setHeadingText] = useState("");
function handleChange(event) {
// console.log(event.target.value);
…
rv7
- 37
- 5
0
votes
1 answer
Derive Input Value Attribute from Iterating through state Maps keys
I'm iterating through keys of a Maps object using a spread operator and would like to know how to derive the value from state.
const [data, setData] = useState(
new Map(
Object.entries({
datapoint1: "",
datapoint2: "",
…
Ibra
- 912
- 1
- 12
- 31
0
votes
1 answer
Warning while using Select component without any value
I have and Select and MenuItem components used in the code as follows:
Q3.Is this the correct data?
…
Tan
- 1,433
- 5
- 27
- 47
0
votes
0 answers
Why can't I properly update nested state in React?
In this example below, I want to reset the input field back to an empty string after clicking submit: https://codesandbox.io/s/todo-app-object-vk99c
Form.js:
class Form extends Component {
state = {
todo: { name: "" }
// inputValue: ""
…
Heymanyoulookkindacool
- 103
- 7
0
votes
0 answers
react controlled input component with local and redux state, how to manage
I have a controlled input component with some action on the value which is passed to local and redux state.
At the moment on the onchange event im calling a function which "clean up" the value and then it send it to the local state and also send it…
junray
- 163
- 3
- 15
0
votes
1 answer
MUI Datepicker onChange event working with manual input but not when clicking date
I've been toying around with this for a while to no avail.
When the user inputs a date manually into the text field, that onChange event fires and everything works as I want it to. When the user clicks on a date from from datepicker, nothing at all…
Blaine M. Lawson
- 106
- 1
- 5
0
votes
2 answers
On Component Re-rendering, input file with value not working
I'm using controlled Input with type file in React Component. If I selected one file in input component and toggling show/hide behavior of main component. On Component re-renders input is not working and throwing below error:
Uncaught DOMException:…
Parveen Sachdeva
- 989
- 2
- 19
- 28
0
votes
1 answer
Warning: A component is changing a controlled input of type undefined to be uncontrolled
I got the following warning when using controlled components, despite having set the initial states:
Warning: A component is changing a controlled input of type undefined to be uncontrolled. Input elements should not switch from controlled to…
Bayu
- 437
- 2
- 10
- 19