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 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 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:

    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.