chenglou / react-radio-group

Better radio buttons.
MIT License
445 stars 75 forks source link

can this be used with useReducer? #57

Closed mdodge-ecgrow closed 1 year ago

mdodge-ecgrow commented 4 years ago

I have switched my form to the useReducer methodology because it was getting too cumbersome. Now I'm not sure if it is possible to continue using this library or not.

Here is my relavant code:

const initialState = {
    bagID: '',
    lineTechName: '',
    infoCorrect: '',
    materialCorrect: '',
    unwantedMaterials: '',
    unwantedMaterial: '',
    qualityAcceptable: '',
    program: '',
    sealingProperly: '',
    temperature: ''
};

const [userInput, setUserInput] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
    initialState
);

....
const handleChange = (evt) => {
    const { name, value } = evt.target;
    setUserInput({ [name]: value });
};
....
<RadioGroup
    name={'infoCorrect'}
    selectedValue={????}
    // onChange={(value) => {
        //  setInfoCorrect(value);
    // }}
    onChange={handleChange}
>
<label className={'radio'}>
    <Radio value={'yes'} />
    Yes
</label>
<label className={'radio ml-5'}>
    <Radio value={'no'} />
    No
</label>
</RadioGroup>

I added question marks to the biggest part that I'm unsure about. Also, I am guessing the handleChange logic will need to change because that is for normal text inputs.

mdodge-ecgrow commented 4 years ago

FYI, for anyone who runs into a similar issue, I figured out how to do this here: https://github.com/chenglou/react-radio-group/issues/53#issuecomment-573045423