Monaca Onsen UI Discord Chat Github Repo

Warning of 'key' for Tabbar



  • 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.



  • 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.