Add active class to button in react

Question

I'm trying to add an active class to my buttons in react, however this doesn't add my class and does nothing when I click on a button.

I get no errors in the console and I have similar code for radio buttons which does work but I am not sure how to modify that code to work for my group of buttons.

I can see in the react dev tools that my class nav-active is being applied to the first button as expected but I dont see the black bg color on the button:

<Styled.button isActive="1" className="nav-active onChlick=bound setActiveTab()>

 const TestBtn = styled(Button)`
  height:40px;
  width:auto;
  background:#ff00ff;
`

class TopCategories extends React.Component {

  constructor() {
    super()
    this.state = { isActive: 1 }
    this.setActiveTab = this.setActiveTab.bind(this)
  }

  setActiveTab(id) {
    this.setState({ isActive: id })
 }

  render() {
    const items = [
  { id: 1, name: 'tab-1', text: 'text', value: '1' },
  { id: 2, name: 'tab-2', text: 'text', value: '2' },
  { id: 3, name: 'tab-3', text: 'text', value: '3' },
  { id: 4, name: 'tab-4', text: 'text', value: '4' },
  { id: 5, name: 'tab-5', text: 'text', value: '5' },
]

const tabs = items.map(item =>
  <div key={item.id}>
    <TestBtn
      isActive={item.id}
      className={this.state.isActive === item.id ? 'nav-active' : ''}
      onClick={this.setActiveTab}
    >
      {item.name}
    </TestBtn>
  </div>,
)

return (
  <Container>
    <Wrapper>
      {tabs}
    </Wrapper>
  </Container>
)
}
}


export default TopCategories

styles.css

.nav-active { background:#000;}

have you cheked isActive get updated when you click and what value it printing. Try for both item.id and isactive — Jayant Patil
– Jayant Patil, Commented Mar 31, 2017 at 8:42
Is .isActive the class you want to add? There's a snippet .isActive { background:#000;} — DroidNoob
– DroidNoob, Commented Mar 31, 2017 at 8:42

Andrii Starusiev · Accepted Answer · 2017-03-31 08:47:52Z

1

You just need send your id in yor function setActiveTab(id).

onClick={() => this.setActiveTab(item.id)}

And i advice you to change key from item.id to index which you send with arrow function.

const tabs = items.map(item => // const tabs = items.map((item, index) =>
  <div key={item.id}> // <div key={index}>
    <TestBtn
      isActive={item.id}
      className={this.state.isActive === item.id ? 'nav-active' : ''}
      onClick={this.setActiveTab}
    >
      {item.name}
    </TestBtn>
  </div>, // what is , ?
)

answered Mar 31, 2017 at 8:47

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

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

3 Comments

Thomas Harrison Over a year ago

Changed the onClick doesn't seem to work and airbnb linter won't allow the key change to index

Andrii Starusiev Over a year ago

Check this fiddle. Is this what you need?

Thomas Harrison Over a year ago

perfect thanks! The problem with the class not being applied was with my styled component not applying the nav-active class

Collectives™ on Stack Overflow

Add active class to button in react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related