DEV Community

Simplify controlled components with React hooks

Stanley Jovel on August 13, 2019

While working with react it is almost inevitable to come across controlled components. A controlled component is a react component that controls th...

Read full post

Mike Dodge • Apr 3 '20 • Edited

Wow! This is the cleanest and easiest I have seen a controlled input done. I have one question. Every other time I've looked up a tutorial on how to do a controlled input, they have always set the input value to the state variable, e.g.

<input type='text' value='startDate' onchange='changeDate' />

How does this work without requiring the value atribute?

Stanley Jovel • Apr 6 '20

Hello Mike! It should work with or without explicitly setting the value attribute.
Try it yourself by running the source code on repl.it :
repl.it/@StanleyJovel/Controlled-C...

However, the example code you shared doesn't seem to be valid JSX.

Mike Dodge • Apr 6 '20

Oh, you mean the missing curly braces? Yeah, I forgot to type those, but they are in my code. What I'm stuck on is how to change those input values from another component? I have lifted the state to a shared parent. But when I add in value={batchDates.startDate} to my input, I get: Warning: A component is changing an uncontrolled input of type date to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Stanley Jovel • Apr 6 '20

Interesting, Is it okay if I take a look at some of your code?

Mike Dodge • Apr 6 '20

OK, nevermind, figured it out! :) I wasn't initializing my state variables correctly. But I think in order to be able to set it from a different component, I will need to have that value attribute set to a state value.

Stanley Jovel • Apr 6 '20

Awesome 😃

Orsi • Apr 15 '20

I think the confusion comes from the fact that setting onChange in itself doesn't make the input controlled unless you are setting value as well.

And you are right, the controlled component value needs to be initialized so the input state should be initialized first: const [input, setInput] = useState({ username: "", password: "" }). These initial values could be passed into the custom hook too.

Chandra Prakash Tiwari • Jun 17 '20

this worked. Thanks Orsi :)

Evan Kennedy • Jul 3 '20 • Edited

I'd also like to point out that you could also add additional functionality such as 'setDefaults', or 'clearValues' too.

import { useState } from 'react'

export const useInputChange = (defaultValues) => {
  const [input, setInput] = useState({...defaultValues})

  const handleInputChange = (e) => setInput({
    ...input,
    [e.currentTarget.name]: e.currentTarget.value
  })

  const setDefaults = () => {
     setInput({...defaultValues});
  }

  const clearValues = () => {
    setInput({});
  }

  return [input, handleInputChange, clearValues, setDefaults]
}

Chandra Prakash Tiwari • Jun 17 '20

This is a good approach, but this didn't worked for me.
still showing

index.js:1 Warning: A component is changing an uncontrolled input of type number to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

Chandra Prakash Tiwari • Jun 17 '20

I think you are not using the value of the state object as the value of input..
this is not the controlled input here.

<input type="text" name="username" onChange={handleInputChange} />

IanHancock36 • Mar 25 '21

Just got out of a bootcamp was struggling with handle changes and hooks etc this makes so much sense and I really like how the hooks is in a separate file which allows a such a clean reading ability thank you for this article!!!

Nikola Lakovic • Feb 24 '20

Perfect Stanley! :) Thanks!

Mike Dodge • Apr 6 '20

Stanley, wow small world!! I just saw you graduated in Computer Science from UW-Eau Claire. I graduated in Computer Science from UW-Eau Claire as well!!

Stanley Jovel • Apr 6 '20

Really?! That is so awesome!
I did not graduate there though haha I did a 1-year exchange program and absolutely loved it.

Ju • Mar 29 '20

"THIS APPROACH IS NOT SCALABLE"
unless this.setState({[event.target.name]: event.target.value})
;)

Stanley Jovel • Apr 6 '20

Yes, that is why I'm using that exact approach