Styled Components: setting data in a table to a certain color based on the string that is fetched from the database

Question

I am creating an application where we populate a table with tasks that are assigned to a user. On that table, one of the columns is "priority", which can be either "high", "medium", or "low". I want to set the color of the data on the table to red when the table is playing "high" for the priority level. I have tried my best at looking at documentation using props to accomplish this.

This is styled td component of the table:

const Td = styled.td`
  height: 60px;
  vertical-align: middle;
  color: #${(props) => props.highPriority === true && "f32424"};
  color: ${(props) => props.highPriority ? "red" : "black"};

  &:first-child {
    width: 10%;
  }
  &:nth-child(2) {
    width: 10%;
  }
  &:nth-child(3) {
    width: 10%;
  }
  &:nth-child(4) {
    width: 10%;
  }
  &:nth-child(5) {
    width: 20%;
  }
  &:nth-child(6) {
    width: 40%;
  }
  &:nth-child(7) {
    width: 4%;
  }
  &:nth-child(8) {
    width: 3%;
  }
  &:last-child {
    width: 3%;
  }

  /* font-weight: ${(props) => (props.highPriority ? 600 : 400)}; */
`;

This is actual td component in the table:

<Td props={highPriority}>{task.priority}</Td>

This is the useState that I have setup in order to set the state:

  const [highPriority, setHighPriority] = useState(false);

And this is where I am fetching the data.

useEffect(() => {
    const fetchTasks = async (id) => {
      const res = await fetch(`${taskFetchPath}/organization/${user.organization}`, {
        method: "GET",
        mode: "cors",
      });
      let data = await res.json();
      setAllTasks(data);
      console.log(data);

      // let alltasks = [];
      let overdueTasks = [];
      let inProgressTasks = [];
      let completedTasks = [];

      for (const task of data) {
        const dueDate = new Date(task.due_date);
        const dueDateFormatted = format(dueDate, "MM/dd/yyyy");
        const today = Date.now();
        const todayFormatted = format(today, "MM/dd/yyyy");

        if (task.priority === "high") {
          setHighPriority(true);
        }
        if (dueDateFormatted < todayFormatted && task.isComplete === "NO") {
          overdueTasks.push(task);
          setOverdueTasks(overdueTasks);
        } else if (dueDateFormatted >= todayFormatted && task.isComplete === "NO") {
          inProgressTasks.push(task);
          setInProgressTasks(inProgressTasks);
        } else if (task.isComplete === "YES") {
          completedTasks.push(task);
          setCompletedTasks(completedTasks);
        } else {
          allTasks.push(task);
          setAllTasks(allTasks);
        }
      }
      // if (res.ok) {
      //   setAllTasks(allTasks.filter((task) => task._id !== id));
      // }
    };

    fetchTasks();
  }, [user.organization]);

All of the data and populates perfectly, and everything is functional working (with the exception of my attempt to change the color of the priority column). Any help with this would be greatly appreciated. This is my first post here, so I hope that I explained this well and gave decent code snippets. Thank you!

Answer 1

Looking into your code everything seems fine except passing down the props to TD and also using the state to handle the color change.

Try this solution

<Td taskPriority={task.priority}>{task.priority}</Td>

StyledTd Component: ${(props) => props.taskPriority === "high" ? "#f32424": "#ffff"}