reactjs-toolbox radiobutton group does not change

Question

in my react app I use radio buttons with this code:

 <RadioGroup name='steptype' className={css.ProcessStepRadioButtons} value={this.state.stepsData[stepNumber].stepType}
                                onChange={(value, event) => {
                                    this.changeInputOptionHandlerProcessStep(value, "stepType", stepNumber)
                                }}>
                        <RadioButton label={<T value='processes.new.processStepTypeDuty'/>} value={1} />
                        <RadioButton label={<T value='processes.new.processStepTypeVariable'/>} value={2}/>
                        <RadioButton label={<T value='processes.new.processStepTypeOptioanal'/>} value={3}/>
                    </RadioGroup>

and this handler:

export function changeInputOptionHandlerProcessStep(value, field, step) {
this.setState((prevState) => ({
    stepsData: prevState.stepsData.map((currentStep, i) => {
        if (i === step) {
            return {
                ...currentStep,
                [field]: value
            }
        }
        return currentStep
    })
}), () => {
    console.log("New state in ASYNC callback:", this.state.stepsData);
} );
}

State is set properly, but the radio buttons does not switch visually,

what could be the problem in this case?

thanks

UPDATE consolelog of this.state.stepsData

Update consolelog of this.state.stepsData right bevore render

Answer 1

It seems your state design is not adequate for the RadioGroup component.

This is a controlled component behind the scenes, so the radio button selected is imposed at all times by RadioGroup's value prop. I don't know how you are initialising the component (meaning default selection), but its value should always belong to one of the values of the single RadioButton components, meaning that this.state.stepsData[stepNumber].stepType should be 1, 2 o 3.

stepType sounds to me (making assumptions here) like a string rather than a number, so it may be the initialisation is wrong and the component automatically resorts to the first radio button as the default selected.

Taking that into account, your substate for controlling this group of radio buttons should be a number (1, 2 or 3). Then, your handler changeInputOptionHandlerProcessStep will receive the new selection (new number) as first argument and you can just set the state with the new value. It would be something like:

<RadioGroup 
    name='steptype' 
    className={css.ProcessStepRadioButtons} 
    value={this.state.stepNumber} // initialised to 1, 2 or 3
    onChange={(value, event) => {this.changeInputOptionHandlerProcessStep(value, "stepType", stepNumber)}}
>
    <RadioButton label={<T value='processes.new.processStepTypeDuty'/>} value={1} />
    <RadioButton label={<T value='processes.new.processStepTypeVariable'/>} value={2}/>
    <RadioButton label={<T value='processes.new.processStepTypeOptioanal'/>} value={3}/>
</RadioGroup>

function changeInputOptionHandlerProcessStep(newValue) {
     this.setState({ stepNumber: newValue });
}

Let me know if that works for you.