Issue
How make refactoring this cod in React:
$('#'+$(e.target).attr('for')).prop('checked',true);
});
$(document).click(function() {
$('.dropdown-el').removeClass('expanded');
});
I don't know how refactoring the cod. So that "defaultChecked={true}" was changed to "defaultChecked={false}" when I click on one of the label????
It's my last cod:
const { register, handleSubmit } = useForm<IFormInput>();
const [isOpened, setIsOpened] = useState(false);
const dropdownRef = useRef(null);
const onSubmit = (data: IFormInput) => {
console.log(data);
};
const handleOnClick = (event: any) => {
console.log("test");
setIsOpened(!isOpened);
event.stopPropagation();
event.preventDefault();
};
return ( <span
ref={dropdownRef}
onClick={handleOnClick}
className={isOpened ? "expanded dropdown-el" : "dropdown-el"}
>
<form onSubmit={handleSubmit(onSubmit)}>
<input className={styles.input}
{...register("sortType")}
type="radio"
value="Freelancer"
id="sort-relevance"
defaultChecked={false}
/>
<label className={styles.label} htmlFor="sort-relevance">Freelancer</label>
<input className={styles.input}
{...register("sortType")}
type="radio"
value="Client"
id="sort-best"
defaultChecked={true}
/>
<label className={styles.label} htmlFor="sort-best">Client</label>
</form>
</span>)
Solution
export default function App() {
const { register, handleSubmit } = useForm<IFormInput>();
const [isOpened, setIsOpened] = useState(false);
const dropdownRef = useRef(null);
const [checked, setChecked] = useState("Client"); // Set first initial value for select
const handleClick = (e) => {
setChecked(e.target.value);
e.target.defaultChecked = true;
};
const onSubmit = (data: IFormInput) => {
console.log(data);
};
const handleOnClick = (event: any) => {
console.log("test");
setIsOpened(!isOpened);
event.stopPropagation();
event.preventDefault();
};
return (
<div>
<span
ref={dropdownRef}
onClick={handleOnClick}
className={isOpened ? "expanded dropdown-el" : "dropdown-el"}
>
<form onSubmit={handleSubmit(onSubmit)}>
<input
type="radio"
name="radio"
id="sort-relevance"
checked={checked === "Freelancer"}
onClick={(e) => handleClick(e)}
/>
<label
htmlFor="sort-relevance"
onClick={() => setChecked("Freelancer")}
>
Freelancer
</label>
<input
type="radio"
name="radio"
id="sort-best"
checked={checked === "Client"}
onClick={(e) => handleClick(e)}
/>
<label htmlFor="sort-best" onClick={() => setChecked("Client")}>
Client
</label>
</form>
</span>
</div>
);
}
Answered By - Arthur Zuev
Answer Checked By - - Dawn Plyler (ReactFix Volunteer)