React

by ronnjoe

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TabStrip extends React.Component {

  render() {
    return (
      <div className="TabStrip">
        {this.props.titles.map((title, index) => {
          const className = "TabStrip-title" +
            (this.isActive(index) ? " TabStrip-title-active" : "");

          return (
            <div onClick={() => this.setActiveIndex(index)} key={index} className={className}>
              {title}
            </div>
          );
        })}
      </div>
    );
  }

  isActive(index) {
    return index === this.getActiveIndex();
  }
  
  setActiveIndex(activeIndex) {/* Write your code here */
  
  
    if(this.state.active){
      this.setState({'active': false,'class': 'album'})
    }else{
      this.setState({'active': true,'class': 'active'})
    }
  }
  
  getActiveIndex() {/* Write your code here */}
}

class App extends React.Component {
  state = { activeIndex: 1 };
  render() {
    return (<div>
      <TabStrip activeIndex={this.state.activeIndex}
        onActiveIndexChange={activeIndex => {
          this.setState({
            activeIndex
          });
        }}
        titles={["My account", "Settings", "Dashbboard"]} 
      />
    </div>);
  }
}

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);