I created tabs in react and and now on click I have to change the class of the tabs the tabs classes may be as follows:

1:active
2:previousActive
3:alreadySelected

On click of a tab class bee active and check whether it is selected before or not using alreadySelected class and active class from the last active tab is remove and if it is not alreadySelected then add alreadySelected.

Code of one tab in react:

var TabBody = React.createClass({
    getInitialState: function() {
        return {
            class: 'tabBody tab activeTab'
        }
    },
    render: function() {
        a.tabBody = this;
        return (React.createElement('div', {
            className: this.state.class,
            ref: 'body',
            onClick: handleTabClick
        },
        React.createElement('span', {}, "Body"))
        );
      }
});

In order to change the class of the tabs I am doing in two ways and want to know which is effective. Code style one:

 var bodyClass = (a.tabBody.state.class).split(' ');
 var sleeveClass = (a.tabSleeve.state.class).split(' ');
 var neckClass = (a.tabNeck.state.class).split(' ');
 if (data === 'tabBody') {
     bodyClass.push('activeTab');
     var str1 = program.arrayToString(bodyClass);
     Interfaces.tabBody.setState({
         class: str1
     });
 }

Code Style 2

a.tabBody.refs.body.classList.remove('activeTab');
a.tabBody.refs.body.classList.add('tabPreviewComplete');
a.tabSleeve.refs.body.classList.add('activeTab');

Which style is good for doing this and why?

I created tabs in react and and now on click I have to change the class of the tabs the tabs classes may be as follows:

1:active
2:previousActive
3:alreadySelected

On click of a tab class bee active and check whether it is selected before or not using alreadySelected class and active class from the last active tab is remove and if it is not alreadySelected then add alreadySelected.

Code of one tab in react:

var TabBody = React.createClass({
    getInitialState: function() {
        return {
            class: 'tabBody tab activeTab'
        }
    },
    render: function() {
        a.tabBody = this;
        return (React.createElement('div', {
            className: this.state.class,
            ref: 'body',
            onClick: handleTabClick
        },
        React.createElement('span', {}, "Body"))
        );
      }
});

In order to change the class of the tabs I am doing in two ways and want to know which is effective. Code style one:

 var bodyClass = (a.tabBody.state.class).split(' ');
 var sleeveClass = (a.tabSleeve.state.class).split(' ');
 var neckClass = (a.tabNeck.state.class).split(' ');
 if (data === 'tabBody') {
     bodyClass.push('activeTab');
     var str1 = program.arrayToString(bodyClass);
     Interfaces.tabBody.setState({
         class: str1
     });
 }

Code Style 2

a.tabBody.refs.body.classList.remove('activeTab');
a.tabBody.refs.body.classList.add('tabPreviewComplete');
a.tabSleeve.refs.body.classList.add('activeTab');

Which style is good for doing this and why?

• javascript
• jquery
• web
• reactjs

Share Improve this question Follow edited Nov 9, 2015 at 9:37 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Nov 9, 2015 at 9:35 Muhammad Asif JavedMuhammad Asif Javed 16511 gold badge33 silver badges1313 bronze badges 6

• Code Style 2 because you are using refs to access the dom element and react will store the virtual dom id on each so it would be faster and cleaner way – Dhaval Patel Commented Nov 9, 2015 at 9:39
• but react is all about states we have to update thing via setState. but using ref we are breaking its pattern – Muhammad Asif Javed Commented Nov 9, 2015 at 9:47
• is there an alternative of this to alter the classes – Muhammad Asif Javed Commented Nov 9, 2015 at 9:47
• yes my friend if we update any dom then we must follow the state but you are adding and remove the class of styles and for it's not require to put it in state because when you called setState it will call render funcation again – Dhaval Patel Commented Nov 9, 2015 at 9:48
• but when we use ref there is no need to use setState. it automatically render the ponent – Muhammad Asif Javed Commented Nov 9, 2015 at 9:50

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 8

The point of react is that you do not need to/ should not update DOM directly. The idea behind react is that you render react ponents (virtual DOM), and that you let react figure out if and how to update DOM.

Changing classes using refs is a very risky strategy: Your ponent's state is then no longer in sync with actual DOM, which could bring you into debugging nightmares later on. So I would pose that Code Style 2 (even though it works) violates react principles. One of the few exceptions for using refs, is to add a listener to a DOM ponent after it is mounted.

The react way is to put the classNames in state.
And do a setState() to update.
And let react do the DOM update,
which is very likely to be way faster, cleaner, and easier to maintain than getting refs, and changing classNames.

ref means you are using the actual DOM and setState means you are saying to react that please update the specific attribute of the ponent. every thing is maintain by react.

On the other hand if you use refs it means you are doing every thing your own and react have no concern to your attributes and properties you are updating.