I am using radio button group from material-ui. I can set defaultSelected to have a default selection but once rendered, i won't be able to set it programatically. It only changes when you click the radio. Is this something which we can do with material-ui?

I am using radio button group from material-ui. I can set defaultSelected to have a default selection but once rendered, i won't be able to set it programatically. It only changes when you click the radio. Is this something which we can do with material-ui?

• javascript
• reactjs
• material-ui

• can you share your code so that we can check – Md.Estiak Ahmmed Commented Aug 27, 2016 at 10:08

1 Answer 1

In react ponents can be either controlled or uncontrolled. Controlled means that you set that ponent value yourself and you keep the value in the parent ponent as well in a state or prop. While uncontrolled ponent means that you only set a default value and you let the ponent handle the rest.

Now in most cases you would need a ponent that edits a value to send that value out to its parent, for sending a server request or just storing this value in the application state, so I would argue that in most cases you should use a controlled ponent.

To do this in material-ui instead of setting the 'defaultSelected' propery use the 'valueSelected' property and set it to a prop or state variable, also use the 'onChange' callback to set the state value or propagate the callback outside where you will eventually change the state in a controller ponent or update the application state in some store.