After utilizing next.js, I created a webpage that allows users to select from 3 different menus and then view a bar graph generated by Chartjs based on the selected information. Each menu comes with a default value already set.
I've encountered a bug where the checked label does not display correctly for one of the menus. (Upon refreshing the page, I briefly see it being checked and then unchecked). Below is the code snippet for the menu component. Any assistance in fixing this bug would be greatly appreciated!
'use client'
interface SocialValueGroupProps {
selectedSocialValue : string,
handleSelectValue : (value: string) => void
}
const SocialValueGroup = ( props: SocialValueGroupProps) => {
const socialValues: { id: string, name: string }[] = [
{ id: "work_score", name: "Importance of work" },
{ id: "fam_score", name: "Importance of family" },
{ id: "religion_score", name: "Importance of religion"},
{ id: "gender_equality", name: "Importance of gender equality"},
{ id: "ethnic_rel_tolerance", name: "Ethnic and religious tolerance"},
{ id: "sex_minority_tolerance", name: "Tolerance of sexual minorities"}]
function handleChange(event: React.ChangeEvent) {
props.handleSelectValue(event.target.id)
}
return (
<div className="w-full">
<fieldset>
<div className='grid-cols-1 px-5 mt-5'>
<h2 className='text-black text-2xl'>Select a social value</h2>
{socialValues.map((socialValue: { id: string, name: string }) => (
<div key={socialValue.id} className='px-5 my-2'>
<input
type="radio"
id={socialValue.id}
value={socialValue.name}
name="social_value"
className="hidden peer"
onChange={handleChange}
defaultChecked={props.selectedSocialValue == socialValue.id}
/>
<label
htmlFor={socialValue.id}
className="block w-full px-4 py-2 rounded-full bg-gray-300 text-gray-800 cursor-pointer hover:bg-gray-400 transition-colors
peer-checked:bg-indigo-300"
>
{socialValue.name}
</label>
</div>
))}
</div>
</fieldset>
</div>
)
}
export default SocialValueGroup