Make controlled components uncontrolled

[hallgren]

Hi!

This is not a issue in itself more a question I guess.

I found the turbo-react project that instead of binding json to a template sends html directly and use react to diff and update the body tag.

I love the idea of going back to the root of the web and only use javascript for progressive enhancement as it was made to do (I think).

I created a todo app based on the todomvc guides named reactize-todo that use the reactize.js made by @ssorallen.

The things I struggle with is that the controlled components in react makes my have to fiddle alot with creating react Classes and what not, instead of only diff the html in the page with the replacing html. So my question is, can the controlled components be made uncontrolled to make them acts as they do in pure html forms?

Or are there other diffing libraries that do only this?

BR Morgan

[jimfb]

Hi @hallgren,

These tasks are primarily for tracking changes needed to the react code base. Since this is more of a general question related to React and other diffing libraries, you'll probably have more success asking on StackOverflow. I'm going to close out this issue, since it's more of a general question for the community rather than a bug. Closing the issue doesn't prevent others from jumping in and responding (I encourage anyone with a good answer to do exactly that), but it does take the issue off our todo list.

Is there a reason you're using a controlled component rather than an uncontrolled one? It sounds like uncontrolled components mostly do what you want. If you need to do something fancy to your component, you can always break out of react and use the DOM imperative API (though, obviously this isn't the react way, and isn't our official recommendation for building react apps).

Good luck with your project!

[hallgren]

Hi and thanks for the answer @JSFB !

Switching from value to defaultValue did the trick on almost all the cases. If a is transfered to it will not mutate its value if a replacement input tag with the new value="new title" is loaded from the backend and inserted with react in the DOM.

Are there any special cases on type="submit" compared to type="text" when it comes to the value => defaultValue to make it uncontrollable?

[jimfb]

My understanding is that an input type="submit" results in a button, which is inherently not editable by a user, so I don't think the concept of controlled/uncontrolled exists. cc @spicyj