Warning of 'key' for Tabbar

semix

Hi there.
I am a newbie to reactjs as well as onsenui, I think these are great tools which my team would employ for our web app.

To start off, I tried the official tutorial for the tabbar widget for react (link is https://tutorial.onsen.io/?framework=react&category=Reference&module=tabbar). I just ported it and see how it works. While it works fine on the page, I got the following warnings from console:

Warning: Each child in an array or iterator should have a unique “key” prop… See https://fb.me/react-warning-keys for more information.

It seems to fix this we need to put a key parameter to the element in a list, and I did tried that with

  renderTabs: function() {
    return [
      {
        content: <MyTab title='Home' />,
        tab: <Ons.Tab label='Home' icon='md-home' key={1}/>
      },
      {
        content: <MyTab title='Settings' />,
        tab: <Ons.Tab label='Settings' icon='md-settings' key={2}/>
      }
    ];
  }

However, the warnings are still there, anybody has met similar problem?

Thank you for your time in advance.

alihaberfield

The answer from here worked for me to solve this exact warning: https://github.com/OnsenUI/react-onsenui/issues/107

You need to add the key property to both content and tab, like this:

{
   content: <MyTab title="Settings" key={2} />,
   tab: <Ons.Tab label="Settings" key={2} />
}

This solved the warning for me.