Conditionally apply CSS classes in React

Question

I know this has been answered but I couldn't figure out what is wrong with my code here. I'm trying to add a class based of the conditional field.

React Code:

<div className="boards {task.IsClosed !== 0 ? 'complete' : ''}">
  <p>{task.TaskName}</p>
  <div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>

Output:

<div class="boards {task.IsClosed !== 0 ? 'complete' : ''}">
  <p>Task 2</p>
  <div><div>Completed</div></div>
</div>

I want the output to be <div class="boards complete">

bturner1273 · Accepted Answer · 2020-06-02 21:10:44Z

2


<div className=`boards ${task.IsClosed !== 0 ? 'complete' : ''}`>
  <p>{task.TaskName}</p>
  <div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>

I think you want this^^^

for string interpolation in javascript the ` character must be used for quotes and the expression being interpolated must be within ${}

... or you can make a variable to store the class i.e.

let className = task.IsClosed !== 0 ? 'complete' : '';
...
...
<div className={className}>
  <p>{task.TaskName}</p>
  <div>{task.IsClosed !== 0 ? <div>Completed</div> : null}</div>
</div>

edited Jun 2, 2020 at 21:10

answered Jun 2, 2020 at 21:06

bturner1273

7207 silver badges19 bronze badges

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

1 Comment

Nikita Gupta Over a year ago

Thank you. I got it resolve with this code: className={boards__body${task.IsClosed !== 0 ? complete` : ''}`}

Collectives™ on Stack Overflow

Conditionally apply CSS classes in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related