React中的嵌套对象和表中的显示

Question

我在遍历我的对象时遇到了困难。

 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}
                />
          )
     }

以下是我的表数据组件：

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>
    </>
  );
}

我应该像下面这样拥有这个表，但无法实现它：

​

​

我尝试过不同的方法来迭代，但是没有得到想要的结果。欢迎任何建议。

Answer 1

我能在别人的帮助下解决这个问题

下面是我对表数据的解决方案：

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>
    </>
  );
}