In my ReactJs app I want to get only the values of the fields that shows to the screen, for example I have some radio groups and one group will be hide when I choose specific value like the code below:
const App = () => {
const [value, setValue] = useState();
const [value2, setValue2] = useState();
const onChange = (e) => {
setValue(e.target.value);
};
const onChange2 = (e) => {
setValue2(e.target.value);
};
return (
<div className='container'>
<div>
<Radio.Group value={value} onChange={onChange}>
<Radio value={1}>yes</Radio>
<Radio value={2}>no</Radio>
</Radio.Group>
</div>
{value === 1 ? null : (
<div>
<Radio.Group value={value2} onChange={onChange2}>
<Radio value={3}>yes</Radio>
<Radio value={4}>no</Radio>
</Radio.Group>
</div>
)}
</div>
);
};
as you can see in my simple code, when the value at the first radio groud is '1' the second radio group will be hide. but, if I choose in the second radio group some value (3 or 4) and then select in the first radio group the value '1', the value in the second still will be what I choose before.
This case is simple to reset one field or ignore it, but if I have a form with 20 fields, I want to get only the fields that shows on screen, even if I did not reset the hide fields.
There is a way to get all the values that render in 'container' div or better way to do it?
Try this
// This means "whenever the second group becomes hidden, reset its state to default"
useEffect(() => {
const secondIsHidden = value === 1;
if (secondIsHidden) setValue2(undefined); // Or whatever
}, [value]);
I created a state and with each key, i set the boolean value. If its not-hidden, i set false otherwise true.
const App = () => {
const [value, setValue] = useState();
const [value2, setValue2] = useState();
const [radioValues, setRadioValues] = useState({ 1: false, 2: false, 3: false, 4: false });
const onChange = (e: any) => {
setRadioValues((prev) => {
let newValues: any = {};
Object.entries(prev).forEach((item: any) => {
newValues[parseInt(item[0])] = e.target.value === 1 ? [3, 4].includes(parseInt(item[0])) : false;
});
return newValues;
});
setValue(e.target.value);
};
const onChange2 = (e: any) => {
setValue2(e.target.value);
};
console.log(Object.keys(radioValues).filter((key) => !radioValues[key]));
return (
<div className='container'>
<div>
<Radio.Group value={value} onChange={onChange}>
<Radio value={1}>yes</Radio>
<Radio value={2}>no</Radio>
</Radio.Group>
</div>
{value === 1 ? null : (
<div>
<Radio.Group value={value2} onChange={onChange2}>
<Radio value={3}>yes</Radio>
<Radio value={4}>no</Radio>
</Radio.Group>
</div>
)}
</div>
);
};
export default App;