Controlled vs uncontrolled components when wanting to have a set value that can be edited - React

Question

I have a form in the app I'm building that has several inputs which have set value props that are populated dynamically from the db, but they also have onChange methods which update the state of the inputs on edit.

This is because I want to show the current value, but then also allow the user to edit and update that value.

After saving the new value I get this error:

index.js:1 Warning: A component is changing a controlled input of type undefined to be uncontrolled.
Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between 
using a controlled or uncontrolled input element for the lifetime of the component.
    in input (at MyProjects.js:43)
    in form (at MyProjects.js:35)
    in div (at MyProjects.js:31)
    in MyProjects (created by Context.Consumer)
    in withRouter(MyProjects) (created by ConnectFunction)
    in ConnectFunction (at UserInfo.js:67)
    in section (at UserInfo.js:63)
    in div (at UserInfo.js:34)
    in UserInfo (at Profile.js:284)
    in main (at Profile.js:281)
    in Profile (created by Context.Consumer)
    in withRouter(Profile) (created by ConnectFunction)
    in ConnectFunction (at App.js:108)
    in Route (at App.js:104)
    in Private (at App.js:84)
    in Switch (at App.js:66)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:65)
    in div (at App.js:64)
    in Provider (at App.js:63)
    in Unknown (created by Context.Consumer)
    in withRouter() (at src/index.js:9)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:8)

Why would the input type be undefined?

controlled input of type undefined

and what would be the proper way to implement the functionality I want without getting this error?

Update

<label className='edit-project-label'
       htmlFor='profile-project-title'>
       Title
</label>
<input className='edit-project-data-input'
       id='profile-project-title'
       name='projectTitle'
       onChange={e => onChange(e)}
       value={projectTitle}
/>

Here, projectTitle comes from state which is updated from MongoDB when the user clicks a button to edit the input field

Can you show a bit of code ? I think you initiate the value inside the component jsx instead of setting it in the state — Nevosis, Feb 10 '20 at 16:49
I'm not really sure what's causing your error. However I thought you should be aware that you can have an unctrolled component with a default value. `` — TKoL, Feb 10 '20 at 16:52
I would put `type="text"` or something on that input of yours — TKoL, Feb 10 '20 at 16:54
Using defaultValue removed the error and keeps the functionality I wanted, cheers — PumpkinBreath, Feb 10 '20 at 16:56

Controlled vs uncontrolled components when wanting to have a set value that can be edited - React

0 Answers0