Nested Object in React and display in table

Question

I am having trouble iterating through my object.

 export default function UserProfile(props) {
// props.user has Object{social:Object{email:{},.....}}
    const form = useForm({ // Mantine form
        initialValues: {
         social: {
            email: {
              email: props.user.email,
              notifications: true,
            },
            facebook: {
              fb_id: props.user.fb,
              notifications: true,
            },
            telegram: {
              chat_id: props.user.tele,
              notifications: false,
            },
          },
        },
    
    return(   
               <Tabledata
                  social={{ ...form.getInputProps("social") }}
                  session={session}
                />
          )
     }

here is my table data component:

function Tabledata({ social }) {
  console.log(social);  // in Console Object { value: {…}, onChange: getInputOnChange(val) }
  

  return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Communication channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(social.value).map((data, index) => (
            //console.log(data)
            
             <tr key={index}>
               <td>{data}</td>
               <td>{data.notifications ?
            (<CheckCircleIcon
            className="h-6 w-6 text-green-500" />) : 
           (<XCircleIcon className="h-6 w-6 text-   red-500"/>)}</td>
             </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

I should have this table like the one below, but unable to implement it:

I've tried different ways to iterate but failed to get the desired result. Any suggestions are welcome.

Answer 1

I'm able to solve the problem with a help

here is my solution for the table data:

function Tabledata({ social }) {   
  return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Communication channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(social.value).map((data, index) => (               
             <tr key={index}>
               <td>{data}</td>
               <td>{social.value[data]['notifications'] ? // The way I can access the value of the notification
            (<CheckCircleIcon
            className="h-6 w-6 text-green-500" />) : 
           (<XCircleIcon className="h-6 w-6 text-   red-500"/>)}</td>
             </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}