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:


// The click makes all 3:
//    MenuItem
// update first, and then the Router change calls:
//    TabComponent
// again, so that all 3:
//    MenuItem
// update for the second time..

// That's 6 updates, AND..
// Somehow only the previously selected 
//    TabComponent
// gets updated, not just the new, single:
//    MenuItem

// Maybe I need to use something different than 
//    React.renderComponent
// To re-initiate the state of the app?







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({
      ...