0

I have a list of objects displaying on the frontend, along with a radio button.

When a user checks a radio button, the corresponding object details get stored in a form field.

The problem is all my radio buttons are checking, which means users can select more than one object, and I don't want that. How do I go about it

here is the code

    <Form>
{freelancerArray.map((val, index) => (
<div className="d-flex gap-4 r-div" key={index}>
<Form.Check type="radio"
aria-label="1" 
onChange={(e) => {
  if (e.target.checked) {
    let acc = assignedfreelancer
    acc.freelancerId = val.uid
    acc.freelancerName =  val.name.firstname + val.name.lastname
    setAssignedFreelancer(acc) 
    
  } else {
   console.log(assigneddata); 
  } 
}}
value={assignedfreelancer}
/>
<div className="d-flex gap-3">
<div className="profile-image-div mt-1">
<img src={val.freelancerPhotoUrl} alt=" " className="profile-image"/>
</div>

<p className="mt-08 mb-0">{val.name.firstname} {val.name.lastname}</p>
</div>

</div>
))}
</Form>

This is the state the selected freelancer is getting changed to

    //form for freelancers that workorders are assigned to
 const [assignedfreelancer, setAssignedFreelancer] = useState({
  freelancerId: "",
  freelancerName: ""
 })

My radio button is working like a checkbox and I don't want that

Yetunde
  • 1

1 Answers1

0
  • You can try this way:
<Form.Check type="radio"
aria-label="1" 
onChange={(e) => {
  if (e.target.value) {
    let acc = assignedfreelancer
    acc.freelancerId = val.uid
    acc.freelancerName =  val.name.firstname + val.name.lastname
    setAssignedFreelancer(acc) 
    
  } else {
   console.log(assigneddata); 
  } 
}}
value={val.uid}
checked={assignedfreelancer.freelancerId === val.uid}
/>
Hanh Nguyen
  • 1
  • 1
  • I tried this but I was unable to check my box. I could check it but it does not display as checked. Thank you – Yetunde Oct 08 '22 at 20:39