JSFiddle - React, Tailwind, and code Playground

by TrySpace

HTML

<div id="start">
    
</div>

CSS

.active {
    
    border: 2px dashed red;
}

JavaScript

// TODO: onHashChange, calls Tabcomponent again, with different UID


// Problem #1:


// Backbone Router:
//    routesDefined = "home, about, contact"

// When Router updates URL: 
//    React.renderComponent TabComponent(uid: routesDefined), $el[0]

// So routesDefined takes yourwebsite.com/#/home and gives TabComponent:
//    uid: "home"

// So I could apply:
//    activeMenuItemUid: this.uid

// This works, however,
// Going back in History with the back button, does not update
// So I need a way to activate:
//    this.setState({activeMenuItemUid: uid})

// Doing that after componentDidUpdate, will generate an infinite loop,
// And trying it at componentWillUpdate, will throw an error that it has to be rendered first
// And render should prefferably contain no logic, according to the docs

// For instance the:
//    var menuItems = this.props.menuItems.map(function(menuItem){})
// should have probably be put in componentWillMount, but then also in componentWillUpdate, making it less efficient again..


// Problem #2:







var TabComponent = React.createClass({
  getDefaultProps: function() {
    return {
      menuItems: [
        {uid: 'home'},
        {uid: 'about'},
        {uid: 'contact'}
      ]
    };
  },

  getInitialState: function() {
    return {
      activeMenuItemUid: 'home'
    };
  },

  setActiveMenuItem: function(uid) {
    this.setState({activeMenuItemUid: uid});
  },

  render: function() {
    var menuItems = this.props.menuItems.map(function(menuItem) {
      return (
        MenuItem({
          active: (this.state.activeMenuItemUid === menuItem.uid),
          key: menuItem.uid,
          onSelect: this.setActiveMenuItem,
          uid: menuItem.uid
        })
      );
    }.bind(this));

    return (
      React.DOM.ul({className: 'nav navbar-nav'}, menuItems)
    );
  }
});

var MenuItem = React.createClass({
  handleClick: function(event) {
    event.preventDefault();
    console.log("click");
   ...