ruby on rails - React component re-renders on state change, then re-initializes and re-renders -

i have tabs based on: https://codepen.io/amwill/pen/qomyep , when clicking on tab, browser renders selected tab switches first one!

react dev console shows upon state change, components rendered expected, briefly displaying selected tab, createreactelement() gets called again! constructor balances gets called , state cleared, causing re-render first tab, regardless of tab clicked!

i using:

• rails 5.0.0.1
• react_on_rails ~> 6

here view file:

<%= react_component 'balancesapp', props: {balances: @balances} %> 

my entry point file:

import react 'react'; import reactonrails 'react-on-rails';  import balances '../containers/balances';  const balancesapp = (props) => (   <balances {...props} /> );  reactonrails.register({ balancesapp }); 

and top level component:

export default class balances extends react.component {   static proptypes = {     balances: proptypes.array.isrequired   };    constructor(props, context) {     super(props, context);      this.state = { activebalance: this.props.balances[0],       balances: this.props.balances };     this.setactivetab = this.setactivetab.bind(this);   }    setactivetab(balance) {     this.setstate({activebalance: balance});   }    addbalance(balance) {     var balances = react.addons.update(this.state.balances, { $push: [balance] })     this.setstate({ balances: balances, activebalance: balance });   }    render() {     return(       <div>         <tabs balances={this.state.balances} activebalance={this.state.activebalance}               setactivetab={this.setactivetab} />         <content activebalance={this.state.activebalance} handlenewbalance={this.addbalance} />       </div>     );   } } 

i can post more code if needed, there components tabs , content, , list items have onclick methods bound appropriately in codepen example linked above.