CODEWITHSUNDEEP
cssreactjs
user10735105
user10735105

Reputation:

Conditional CSS Reactjs in Tab Navigation

I have my custom tab navigation in React.js. I want to change the background color of the active tab using conditional rendering or state change. I tried passing state for color but nothing is changing in CSS. Here is my code link: https://stackblitz.com/edit/reacttabs

Please help!

Upvotes: 0

Views: 130

Answers (2)

Sergey
Sergey

Reputation: 1075

I fixed some errors, so here is a final working result

RESULT

Upvotes: 0

Habeeb Rahman
Habeeb Rahman

Reputation: 340

you have to conditionally style the li element

first define a variable for active tab style

var active = Object.assign({},tabStyles);
    active.backgroundColor = '#000';

then inside the render conditionally call the desired style

<li style={this.state.active == '1' ? active  : tabStyles} onClick={() => {this.toggle('1')}}>A</li>
<li style={this.state.active == '2' ? active : tabStyles} onClick={() => {this.toggle('2')}}>B</li>

Upvotes: 2

Related Questions