Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Switch class on tabs with React.js

So I have a tab-component that has 3 items:

React.DOM.ul( className: 'nav navbar-nav', 
    MenuItem( uid: 'home')
    MenuItem( uid: 'about')
    MenuItem( uid: 'contact)
)

And in the .render of MenuItem:

React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick,
    React.DOM.a( href: "#"[email protected], @props.uid)
)

Every time I click an item, a backbone router gets called, which will then call the tab-component, which in turn will call a page-component.

I'm still trying to wrap my head around the fact there's basically a one-way data-flow. And I'm so used to manipulating the DOM directly.

What I want to do, is add the .active class to the tab clicked, and make sure it gets removed from the inactive ones.

I know the CSS trick where you can use a data- attribute and apply different styling to the attribute that is true or false.

The backbone router already has already gotten the variable uid and calls the right page. I'm just not sure how to best toggle the classes between tabs, because only one can be active at the same time.

Now I could keep some record of which tab is and was selected, and toggle them etc. But React.js already has this record-keeping functionality.

The @handleClick you see, I don't even want to use, because the router should tell the tab-component which one to give the className: '.active' And I want to avoid jQuery, because React.js doesn't need direct DOM manipulation.

I've tried some things with @state but I know for sure there is a really elegant way to achieve this fairly simple, I think I watched some presentation or video of someone doing it.

I'm really have to get used to and change my mindset towards thinking React-ively.

Just looking for a best practice way, I could solve it in a really ugly and bulky way, but I like React.js because it's so simple.

like image 301
TrySpace Avatar asked Mar 17 '14 17:03

TrySpace


People also ask

How do you toggle classes in react JS?

To toggle class on click with React, we can set the className prop. to create the MyComponent component. In it, we have the isActive state. We set it with the setActive function in the toggleClass function.

How do you change tabs in react JS?

Below is the code to get active key and set tab. import { Tabs } from "antd"; import React from "react"; const tabActiveContext = React. createContext({ **setActivetab: (at) => { }** }); class CustomTab extends React. Component { constructor(props) { super(props); this.

How do I change classes in React?

Toggling the class To toggle a class, we need to use the boolean value in the ternary expression. If the boolean value is true class name is added to the react element. If the boolean value is false class name is removed from the react element.

How do I customize my React tabs?

You can customize the Tab style by overriding its header and active tab CSS classes. Define HTML string for adding animation and customizing the Tab header and pass it to text property. Now you can override the style using custom CSS classes added to the Tab elements.


1 Answers

Push the state as high up the component hierarchy as possible and work on the immutable props at all levels below. It seems to make sense to store the active tab in your tab-component and to generate the menu items off data (this.props in this case) to reduce code duplication:

Working JSFiddle of the below example + a Backbone Router: http://jsfiddle.net/ssorallen/4G46g/

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)
    );
  }
});

The MenuItem could do very little aside from append a class name and expose a click event:

var MenuItem = React.createClass({
  handleClick: function(event) {
    event.preventDefault();
    this.props.onSelect(this.props.uid);
  },
  render: function() {
    var className = this.props.active ? 'active' : null;

    return (
      React.DOM.li({className: className},
        React.DOM.a({href: "#" + this.props.uid, onClick: this.handleClick})
      )
    );
  }
});
like image 91
Ross Allen Avatar answered Sep 20 '22 22:09

Ross Allen