Использование метода 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>
);
};
Вот что получится если сделать так как показано выше