JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

CSS

ul > li {
  cursor: pointer;
}

li.navigation--active {
  text-decoration: underline;
}

React

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      activeItem: -1,
      items: ['All Projects', 'My Projects'],
    }
  }

  handleItemClick(index) {
    this.setState({
      activeItem: index,
    })
  }

  render() {
    return (
      <div>
        <ul className='bread list-inline'>
          {this.state.items.map((item, index) =>
            <li
              key={index}
              className={this.state.activeItem === index ? 'navigation--active' : ''}
              onClick={this.handleItemClick.bind(this, index)}
            >
              {item}
            </li>
          )}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)