CODEWITHSUNDEEP
reactjs
Nikita Gupta
Nikita Gupta

Reputation: 857

Conditionally apply CSS classes in React

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">

Upvotes: 1

Views: 873

Answers (1)

bturner1273
bturner1273

Reputation: 710


<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>

Upvotes: 2

Related Questions