How to dynamically add class in react?

Question

In simple tic-tac game,When someone wins, highlight the three squares that caused the win.

<p data-height="265" data-theme-id="0" data-slug-hash="PQyERJ" data-default-tab="js,result" data-user="akshgods" data-embed-version="2" data-pen-title="Simple tic tac game" class="codepen">See the Pen <a href="https://codepen.io/akshgods/pen/PQyERJ/">Simple tic tac game</a> by ganesh (<a href="https://codepen.io/akshgods">@akshgods</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

In this pen , you can see in console if you win, the winning indexes are logged. can some one update the code, and explain it?

Matan Bobi · Accepted Answer · 2019-01-21 08:19:11Z

8

Edit - Jan 2019:

You can also use the classnames package to do that. The package can be found here and is used like this:

classNames('foo', { bar: true }); -> The result classes will be 'foo bar'.
classNames('foo', { bar: false }); -> The result class will be just 'foo'.

As I didn't understand your question I will answer the question you wrote on the title.

In order to dynamically add class to and element in react you can use the Template Strings functionality in ES2015.

It should look like this:

<div className={`main-class ${this.state.isSelected ? 'selected':''}`}></div>

And then the selected class will be added once the state is changed.

edited Jan 21, 2019 at 8:19

answered Feb 26, 2018 at 13:56

Matan Bobi

2,8111 gold badge18 silver badges28 bronze badges

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

1 Comment

Matan Bobi Over a year ago

@GaneshGodshelwar if you found this answer helpful please mark it as an answer for later on searches.

Collectives™ on Stack Overflow

How to dynamically add class in react?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related