CODEWITHSUNDEEP
reactjsmaterial-ui
Jc John
Jc John

Reputation: 1859

Material ui FormControlLabel returns [object, object] instead of the actual object

I have a problem regarding with getting the value which I expect is an object. I have an array variable which I tried to iterate to generate radio button with choices, now what I want is whenever onChange function is fired, I want to get the object value.

Here is my code:

<RadioGroup
  aria-label="family"
  name="family"
  //   value={value}
  // defaultValue=""
  onChange={handleChangeFamily}
>
  {selectedContactAccount.family.map((family) => {
    const userFamily = family.contact.find(
      (contact) =>
        contact.contact_info.comm_service.service_type.id == 1 &&
        contact.contact_info.is_active == true &&
        contact.contact_info.is_primary == true
    );

    return (
      <FormControlLabel
        key={userFamily.person.id}
        size="small"
        value={userFamily}
        control={<Radio color="primary" size="small" />}
        label={
          userFamily.person.middle_name && userFamily.person.name_extension
            ? `Name: ${userFamily.person.first_name} ${userFamily.person.middle_name} ${userFamily.person.last_name} ${userFamily.person.name_extension}, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
            : userFamily.person.middle_name &&
              userFamily.person.name_extension == null
            ? `Name: ${userFamily.person.first_name} ${userFamily.person.middle_name} ${userFamily.person.last_name}, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
            : userFamily.person.middle_name == null &&
              userFamily.person.name_extension
            ? `Name: ${userFamily.person.first_name} ${userFamily.person.last_name} ${userFamily.person.name_extension}, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
            : `Name: ${userFamily.person.first_name} ${userFamily.person.last_name}, Birthdate: ${userFamily.person.birthdate}, Sex: ${userFamily.person.sex}`
        }
      />
    );
  })}
</RadioGroup>;

When I tried to console.log the handleChangeFamily function it gives me a [Object, Object] which I want to expect is the actual object.

const handleChangeFamily = (event) => {            
    if(event.target.value) {      
      console.log(event.target)   
    }    
  };

Upvotes: 1

Views: 444

Answers (1)

zahra shahrouzi
zahra shahrouzi

Reputation: 1012

it's because of the line :
value={userFamily}

you are passing an object as a value of FormControlLabel, so it will show [Object Object]

Upvotes: 3

Related Questions