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.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Warning of 'key' for Tabbar