Блог

Я сопоставляю некоторые значения дат в моем интерфейсе Gatsby, которые я извлекаю из своего бэкенда Strapi.

Чего я хочу добиться, так это изменить цвет фона в зависимости от того, больше ли значение {item.end} текущей даты. {item.end} содержит значение даты.

Я сделал обычную инструкцию if-else, чтобы проверить это условие, при регистрации консоли она возвращает мне правильное количество итераций в цикле с правильными ответами, основанными на значениях даты.

Но когда я пытаюсь применить ту же логику для своей опоры со следующим:

 <h4 className={
    TodayDate.getDate() > courseEndDate? "educationsOver": "job-desc"
}>{item.title}
</h4>
 

Классы не применяются динамически. Никакие изменения не применяются, и применяется только стандартный класс .job-desc.

Это мой текущий код:

 {course.map(item => {

            let courseEndDate = item.end
            //console.log(`Course end date: ${courseEndDate}`)
            const TodayDate = new Date()
            courseEndDate = new Date(courseEndDate)

            if (TodayDate > courseEndDate) {
              console.log(
                `${courseEndDate} Course end date is not greater than the current date ${TodayDate}.`
              )
            } else {
              console.log(
                `${courseEndDate} Course end date is greater than the current date ${TodayDate}.`
              )
            }

            return (
              <div key={item.id} className="job-desc">
                <h4>Kurs:</h4>
                <h4
                  className={
                    TodayDate.getDate() > courseEndDate
                      ? "educationsOver"
                      : "job-desc"
                  }
                >
                  {item.title}
                </h4>
                <span>{item.credits}amp;nbsp;poäng</span>
                <span>startdatum: {item.start}</span>amp;nbsp;
                <span>slutdatum: {item.end}</span>
              </div>
            )
          })}
 

Что я пропустил в своем коде?

Я думаю, что ваш код должен выглядеть так:

 <h4 className={TodayDate > courseEndDate ? "educationsOver" : "job-desc"}>
 

Обратите внимание на удаление getDate() .

Как бы я изменил код, основываясь на тех же условиях даты, если бы я просто хотел изменить фон в описании задания

Просто сделай:

         return (
          {TodayDate.getDate() > courseEndDate 
          ? 
          <div key={item.id} className="classname-1">
            <h4>Kurs:</h4>
            <h4 className="educationsOver">
              {item.title}
            </h4>
            <span>{item.credits}amp;nbsp;poäng</span>
            <span>startdatum: {item.start}</span>amp;nbsp;
            <span>slutdatum: {item.end}</span>
          </div>
          : <div key={item.id} className="classname-2">
            <h4>Kurs:</h4>
            <h4 className="job-desc">
              {item.title}
            </h4>
            <span>{item.credits}amp;nbsp;poäng</span>
            <span>startdatum: {item.start}</span>amp;nbsp;
            <span>slutdatum: {item.end}</span>
          </div>
         }
        )
 

Наконец исправлено с использованием того же подхода, что и описано:

 <h4 style={{ color: TodayDate > courseEndDate ? "red" : "grey",}} > {item.title} </h4>