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?
1 Answer
In react components can be either controlled or uncontrolled. Controlled means that you set that component value yourself and you keep the value in the parent component as well in a state or prop. While uncontrolled component means that you only set a default value and you let the component handle the rest.
Now in most cases you would need a component 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 component.
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 component or update the application state in some store.