React conditional rendering does not work

Question

I'm programming a todo app in React. At the bottom I give the date when the todo is due. If it is due today, it is red, if not, it is normal. I give the small day the class "dueToday" if it is due today. That also works:

<small className="dueToday">2021-11-24</small>
<small>2021-11-25</small>

In my CSS I have the following code:

small .dueToday {
 /* color: rgb(160,84,112); */
 color: red;
}

In the browser it looks like this: Screenshot

React Code:

{todos.map((todo) => (
  <div
    key={todo.id}
    className="todo"
    onClick={() => deleteTodo(todo.id)}
  >
    <h3>{todo.title}</h3>
    {todo.due !=
    `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}` ? (
      <small>{todo.due}</small>
    ) : (
      <small className="dueToday">{todo.due}</small>
    )}
  </div>
))}

small .dueToday selects that class inside a small element, small.dueToday would be both selectors matching the same element (assuming small appears in the DOM at all and isn't just a React component) — DBS
– DBS, Commented Nov 24, 2021 at 16:13
This is conditional rendering not conditional class (just for clarification). — Jax-p
– Jax-p, Commented Nov 24, 2021 at 16:16

Jose Lora · Accepted Answer · 2021-11-24 16:18:32Z

2

Your issue is you are looking for a small tag that has inside item with the class .dueToday you are supposed to check if a small tag with a .dueToday class, to do that just remove the space in your CSS selector like this:

small.dueToday {
 /* color: rgb(160,84,112); */
 color: red;
}

answered Nov 24, 2021 at 16:18

Jose Lora

1,3884 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Toni Over a year ago

Thanks, that works, pretty stupid mistake.

Jose Lora Over a year ago

Don't worry, that happens sometimes.

Collectives™ on Stack Overflow

React conditional rendering does not work

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related