Использование метода map

Здраствуйте. Я пытаюсь получить примерный результат как на этом фото. Но у меня это не получается. введите сюда описание изображения

это то что сделало ячейку красной

  className={'tuesday'==subject.day&&5==subject.lesson&&'active'}

Но будет ли ячейка красной по идеи, должно зависеть от ключей внутри sl массива внутри которого объекты содержащие ключи day и lesson. То есть например вместо tuesday может быть friday или monday в зависимости от того есть ли это свойство внутри sl

subject это каждая (отдельный объект) td ячейка (кроме th элементов) которая содержит данные day, lesson, id и тд.

введите сюда описание изображения

то есть если day и lesson у subject будет равно day и lesson y sl то класс ячейки становится active. Такова логика. Но реализовать ее не удается. У меня даже нет идей как это решить.

export const Subjects = ({ subject, changeSub, sl }) => {
    // console.log(sl.day==subject.day&&sl.lesson==subject.lesson);
    console.log(sl);
    console.log(subject);
    // console.log(sl.map(sl=>(sl.day==subject.day&&sl.lesson==subject.lesson)));
    return (
        <td
            className={'tuesday'==subject.day&&5==subject.lesson&&'active'}
            onClick={(e) => changeSub(e, subject)}
            key={subject._id}>
            {subject.subject} {subject.teacherNum}
        </td>
    );
};

Компонента Subjects это каждая ячейка

sl.map(sl=>(sl.day==subject.day&&sl.lesson==subject.lesson))

Этот код сработал следующим образом. введите сюда описание изображения введите сюда описание изображения

и когда я поставил его как условие для active класса для элемента td все ячейки стали красными. Я конечно понимал что он не сработает. Я просто хочел показать что выводит тот или иной код.

import React from "react";
import { Subjects } from "../Subjects/Subjects";

export const SchDay = ({day, index, schedule, changeSub, sl}) => {
   console.log(sl);
   return (
       <tr key={day}>
           <th>{schedule[day] && schedule.days[index]}</th>
           {schedule[day] && schedule[day].length > 0 ? (
               schedule[day].map((subject) =>
                   {
                       sl.map(sl=>
                           <Subjects subject={subject} changeSub={changeSub} sl={sl} />
                       )
                   }
               )
           ) : (
               <td>Предмет</td>
           )}
       </tr>
   );
};

Вот что получится если сделать так как показано выше введите сюда описание изображения


Ответы (0 шт):