I'm currently working on a project involving radio buttons and I need to create dynamic state by setting the initial state on the first click, then updating it with subsequent clicks by either concatenating the new value onto the existing state or replacing it if the key already exists.
I've given it a shot on my own, so please bear with me if it's not quite right.
Below is a snippet of what I'm trying to achieve:
import React, { useState } from "react";
import { FormGroup, CustomInput } from "reactstrap";
import UniqueString from "unique-string";
function Ratings({ parentCheckedGood, parentCheckedNA, Question }) {
//initializing empty state object
const [state, setState] = useState({});
//Here is where I am stuck, with each click after the first I should concatenate or
//replace
const handleChange = (e) => {
const { name, value } = e.target;
if (name in state) {
setState(...state, { name: value });
} else {
setState(...state, {
name: value,
});
}
};
console.log(state);
const string = UniqueString();
return (
<div>
<FormGroup required>
<div onChange={handleChange}>
<CustomInput
type="radio"
id={string + "1"}
name={Question}
value="Good"
label="Good"
/>
<CustomInput
type="radio"
id={string + "2"}
name={Question}
value="Fair"
label="Fair"
/>
<CustomInput
type="radio"
id={string + "3"}
name={Question}
value="Poor"
label="Poor"
/>
<CustomInput
name={Question}
type="radio"
id={string + "4"}
value="N/A"
label="N/A"
/>
</div>
</FormGroup>
</div>
);
}
export default Ratings;
Figuring out these radio buttons is proving to be quite a challenge, but I'm determined to crack it. Here's to perseverance!