Render conditional styling from mapped data

Question

I'm populating this table withdata from an API using redux toolkit. I want to grey out the column of the member if he has an emailVerified value of false. Edited most of the code to create a minimal reproduction of the problem

Member's table

{
  "id": 5,
  "members": [
    {
      "id": 24,
      "email": "[email protected]",
      "firstName": "Olaoluwa",
      "lastName": "Ajiboye",
      "emailVerified": true,
      "role": "Operations",
    },
    {
      "id": 27,
      "email": "[email protected]",
      "firstName": "Admin",
      "lastName": "Admin",
      "role": "Operations",
    }
  ]
}

Members.jsx

import { useEffect } from "react"
import { useDispatch, useSelector } from "react-redux";
import { getInvitees } from "#features/organization/inviteSlice";

const Members = () => {

 const dispatch = useDispatch();

 const { invitees } = useSelector((state) => state.invite)}

 useEffect(() => {
    dispatch(getInvitees());
  }, []);

return ( 
 <div>
   {invitees && invitees?.map((invitee) =>
     invitee?.members?.map((member) => {
      return (
       <TeamsTable
         key={member.uid}
         name={`${member.firstName} ${member.lastName}`}
         email={member.email}
         date={moment(member.dateJoined).format("LL")}
         role={member.role}
         ...
         />
       );
     })
   )}
 </div>
)

TeamsTable.jsx

import React from "react";
import { Flex, Td, Text, Tr } from "@chakra-ui/react";
import { useSelector } from "react-redux";

export default function TeamsTable(props) {
const { name, email, role, actions, date } = props;
  return (
    <Tr>
      <Td w="250px">
        <Text fontSize={{ sm: "xs", md: "15px" }} color={textColor}>
            {name}
        </Text>
      </Td>
      <Td fontSize={{ sm: "xs", md: "15px" }}>
          {email}
      </Td>
      <Td>
        <Text fontSize={{ sm: "xs", md: "15px" }} color={textColor} pb=".5rem">
            {role}
        </Text>
      </Td>
      ....
    </Tr>
  );
}

Tried doing this in the TeamsTable but no luck.

const { invitees } = useSelector((state) => state.invite);

const members = invitees[0].members;

const emailVerified = members.map((member) => member.emailVerified);

return (
 <Tr>
   <Td style={{ backgroundColor: member.emailVerified ? 'white' : 'gray'>
    <Text>
       {name}
    </Text>
   </Td>
      ...
 </Tr>
  );

Answer 1

Try following the fixing solutions as below

first, you should pass the emailVerified prop to the TeamsTable component.

// ...
return ( 
 <div>
   {invitees && invitees?.map((invitee) =>
     invitee?.members?.map((member) => {
      return (
       <TeamsTable
         key={member.uid}
         name={`${member.firstName} ${member.lastName}`}
         email={member.email}
         date={moment(member.dateJoined).format("LL")}
         role={member.role}
         emailVerified={member.emailVerified}
         ...
         />
       );
     })
   )}
 </div>
)

For Chakra UI, the style prop is not a valid prop for the Td component.

1. use backgroundColor prop ✅

// ...
export default function TeamsTable(props = {}) {
  const {
    name,
    email,
    role,
    emailVerified,
    // date,
    // ...
  } = props;
  const backgroundColor = emailVerified ? 'white' : 'gray';
  return (
    <Tr>
      <Td w="250px" backgroundColor={backgroundColor} >
        <Text fontSize={{ sm: "xs", md: "15px" }} color={textColor}>
            {name}
        </Text>
      </Td>
      <Td fontSize={{ sm: "xs", md: "15px" }}>
          {email}
      </Td>
      <Td>
        <Text fontSize={{ sm: "xs", md: "15px" }} color={textColor} pb=".5rem">
            {role}
        </Text>
      </Td>
      ....
    </Tr>
  );
}

2. use css prop set the background style ✅

// ...
export default function TeamsTable(props = {}) {
  const {
    name,
    email,
    role,
    emailVerified,
    // date,
    // ...
  } = props;
  const backgroundColor = emailVerified ? 'white' : 'gray';
  return (
    <Tr>
      <Td w="250px" css={{background: backgroundColor}}>
        <Text fontSize={{ sm: "xs", md: "15px" }} color={textColor}>
            {name}
        </Text>
      </Td>
      <Td fontSize={{ sm: "xs", md: "15px" }}>
          {email}
      </Td>
      <Td>
        <Text fontSize={{ sm: "xs", md: "15px" }} color={textColor} pb=".5rem">
            {role}
        </Text>
      </Td>
      ....
    </Tr>
  );
}

live demo

https://codesandbox.io/s/how-to-set-the-chakra-ui-table-td-backgroundcolor-trvllm?file=/src/TeamsTable.tsx

refs

https://chakra-ui.com/docs/components/table/props#td