DEV Community

Discussion on: How to create multi-step forms in React?

Collapse
louiemiranda profile image
Louie Miranda

When typing on an input field, why does it make the following error/warning?

1.chunk.js:55469 Warning: A component is changing an uncontrolled input of type undefined 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: fb.me/react-controlled-components
in input (at Step1.js:17)
in p (at Step1.js:17)
in div (at Step1.js:10)
in Step1 (created by Step)
in Step (at LabsBatch.js:21)
in Steps (at LabsBatch.js:20)
in LabsBatch (at App.js:646)
in Route (at App.js:642)
in Switch (at App.js:158)
in div (at App.js:155)
in App (at src/index.js:12)
in Router (created by BrowserRouter)
in BrowserRouter (at src/index.js:11)

Collapse
sametweb profile image
Samet Mutevelli Author • Edited

There might be two things that cause this:

  1. This tutorial is for version 2. So you probably installed the newer version but still following the old version's tutorial. In that case, simply provide your value for the input like this: value={props.getState('name', '')}
  2. You are using value={props.state.name} for the input element. You shouldn't prefer this usage for the form element's value prop. This usage is meant for only after you know for sure that that form element received a value already. 4. step in the tutorial explains this. Also, if you downloaded the latest version 2.0.4 (check your package.json), please refer to the recent documentation on the GitHub readme file. github.com/sametweb/react-step-bui...

Feel free to reach out if you encounter problems further.

Collapse
louiemiranda profile image
Louie Miranda

Thank you. Yes, I think I followed the old versions tutorial. When I added "value={props.getState('name', '')}" it worked with no errors now. Again, thank you and nice work here.