Parent component setState events not triggering tab content re-renders

[litch]

I have a page like this:

React.createClass({
  onChange: function() {
    this.setState({
      customer: CustomerStore.getCustomer()
    })
  },

...

  render: function() {
    return (
      <div className="CustomerPage">
        <div id="body">
          <Tabs>  
            <Tabs.Tab title='Balances'><BalancesTab customer={customer} /></Tabs.Tab>
            <Tabs.Tab title='Cards'><CardsTab customer={customer} /></Tabs.Tab>
            <Tabs.Tab title='Loans'><LoansTab customer={customer} /></Tabs.Tab>
          </Tabs>
        </div>
      </div>
    )
  }
})

If I update the CustomerStore with a customer (say via an asynchronous request), it will not trigger the tab content components to re-render.

I believe that is due to the cloneWithProps call (https://github.com/akiran/react-foundation-apps/blob/master/lib/tabs/index.jsx#L16).

Incidentally, cloneWithProps is now deprecated and it should be React.cloneElement. I'm not able to make it work even by using that cloneElement, though. I can think of a few workarounds but they all seem terrible.

Any ideas?

[litch]

Update - I was able to resolve this by putting key properties on the Tabs.Tab elements:

<Tabs.Tab title='Info' key={"info " + customer.id}>{info}</Tabs.Tab>

It seems a bit wrong to me, because really that should not be doing a key change to force that update, but that seemed to be the best solution for now...