Questions tagged [controlled-component]

89 questions
0
votes
1 answer

React: changing the state of a controlled value without using setValue?

Codesandbox: https://codesandbox.io/s/magical-black-vp1r0?file=/src/dropdown-selector.js I'm trying to build a very specific component and I'm not sure if its even possible or not. Please let me know. Requirements: SelectBox must be a CONTROLLED…
Jpark9061
  • 924
  • 3
  • 11
  • 26
0
votes
0 answers

React uncontrolled input: better understanding of why it does not re-render on value change

The code I have this simple
with both controlled and uncontrolled inputs. (link to codesandbox.io) import React, { useState, useEffect, useRef } from "react"; const ControlledInput = () => { const [value, setValue] =…
Afialapis
  • 83
  • 7
0
votes
2 answers

ReactJS/Redux : controlled input - set value with properties

I use a controlled text field, in order to listen to the change of value in this field and to force the value in the case where the entry is requested in upper or lower case. So I have to use the value property of the component state. Unfortunately,…
Answerrer
  • 2,803
  • 4
  • 8
  • 18
0
votes
2 answers

change controlled to unctrolled when using file type input

i defined multiple state for my app like this: const [state,setstate]=React.useState({headerpic:'',Headerfontfamily:'',Subheaderfontfamilty:''}) and i use a input as follows for getting an image from my device:
0
votes
1 answer

Controlled Input from Redux, onChange Handler

I have controlled input where i set value from redux, how do I set onChange handler here
Lokesh Bajracharya
  • 457
  • 2
  • 8
  • 19
0
votes
1 answer

React - set controlled input value from the Redux Store

I'm dispatching a redux action on onChange event on an input to add to some "answers" array on the Redux state. Everything works fine and the Redux store gets updated, but the issue is when setting the input value to reflect the change in the Redux…
Ruby
  • 2,207
  • 12
  • 42
  • 71
0
votes
1 answer

Next.js Controlled input not "Controlled"

I have a controlled input that should not update when I type. I have stripped the component down to a basic to mitigate any side effects but it still allows me to edit the value. const myComponent = () => { const text = 'Hello'; …
wdhilliard
  • 135
  • 11
0
votes
1 answer

TypeError: Cannot read property 'name' of undefined error in a controlled-component

I'm trying to get a date as user input through a controlled component but always running into this error "TypeError: Cannot read property 'name' of undefined". This is the piece of code that's causing the error. I'm using the react-datepicker module…
0
votes
0 answers

How to prevent scrolling down a controlled textarea when value changes

I have a long textarea, with 100-200 lines. They corresponds to redux state phrases = [{id, text, ...}], each line of textarea is a phrases[id].text. When I change textarea, it…
Rustam Apay
  • 551
  • 1
  • 4
  • 18
0
votes
1 answer

Is using keys in React to recreate a component a bad practice?

Here is the scenario: I have a timer which counts from 60 to 0, when it's finished (it's on 0), user can select a button (which is located in the parent component) to restart the counter. Right now Timer has an onFinish prop, which executes once the…
Mahdi Ghajary
  • 2,717
  • 15
  • 20
0
votes
1 answer

Controlled components vs FormData interface

I recently stumbled onto this very interesting article that might change the way I will do web form submissions in ReactJS in the future: https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f What do you guys think of…
Jon Th
  • 347
  • 2
  • 13
0
votes
1 answer

How would I clear a controlled input?

I'm stumped on this. I have a controlled input (I'm using Material-UI TextField and Autocomplete). I'm happy for the component to control its own value, except I want to be able to clear the input. How would I do that? function App() { const…
dwjohnston
  • 11,163
  • 32
  • 99
  • 194
0
votes
2 answers

I am trying to get the value of the property in my dropdown menu in react

I am trying to console.log the value of the dropdown item that I selected. I have tried e.target.value and data.value. e.target.value returns nothing and data.value returns undefined. { //…
0
votes
1 answer

React error: from controlled to uncontrolled component

EDIT: this question was marked as a duplicate by some users. Not sure if they read it before doing so. If someone did, please clarify in which sense this is a duplicate. I have a component for checkboxes: class Checkbox extends Component { …
user7499416
1 2 3 4 5
6