Alter inline css with react issue

user_2371684 0
Viewed 26

I am mapping through some date values in my Gatsby frontend which I am retrieving from my Strapi backend.

What I want to achieve is to change the background color depending if value of {item.end} is bigger than current date. {item.end} contains a date value.

I did a normal if-else statement to check this condition, when console logging it gives me back the correct amount of iterations within the loop with the correct responses based upon the date values.

But when I try to apply the same logic for my prop with the following:

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

The classes are not dynamically applied. No changes are applied, and the standard class of .job-desc is applied only.

This is my current code:

{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}&nbsp;poäng</span>
                <span>startdatum: {item.start}</span>&nbsp;
                <span>slutdatum: {item.end}</span>
              </div>
            )
          })}

What am I missing in my code?

gatsby reactjs
1 Answers

I think your code should look like:

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

Note the removal of getDate().

How would I change the code, based upon the same date conditions if I just want to change the background on job-desc

Just do:

        return (
          {TodayDate.getDate() > courseEndDate 
          ? 
          <div key={item.id} className="classname-1">
            <h4>Kurs:</h4>
            <h4 className="educationsOver">
              {item.title}
            </h4>
            <span>{item.credits}&nbsp;poäng</span>
            <span>startdatum: {item.start}</span>&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}&nbsp;poäng</span>
            <span>startdatum: {item.start}</span>&nbsp;
            <span>slutdatum: {item.end}</span>
          </div>
         }
        )

Finally fixed using the same approach as described by:

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