How to implement form controls? Controlled/Uncontrolled components

[duranmla]

Support questions

There are some scenarios where folks need to have control over the value of a form control in order to be able to satisfy the requirements, currently, most of our implementations are uncontrolled components that encapsulate the state value within the implementation and can't be accessed from outside.

Should we aim to have components that work out of the box but also expose a prop to control the state if needed?

Similar to the approach described at https://egghead.io/lessons/react-make-controlled-react-components-with-control-props

[snapsnapturtle]

@duranmla Thanks for bringing this topic up as an issue. I think most of our components are controlled components (or at least support that api). I'm a big fan of controlled components as they seem to fit very well in the React landscape for components to always render deterministically. Let's find the components that don't match this and update them (where possible) so wave is more consistent overall

[div-Leo]

@snapsnapturtle that is true, most of the components we use are controlled components. But what @duranmla was pointing out is a step further. The idea is to have a component that works in isolation with it's own state that does not depend on its environment and also exposes props to control its state and relative renders. So far the ones we have don't work in isolation. The video explains the idea behind it quite well.

Here you have an example of a possible implementation: https://github.com/freenowtech/wave/pull/154 Feel free to start the discussion there, so we can decide on a common strategy.