Dynamic EventKey not working React-Bootstrap

Question

I am dynamically rendering my tabs in React-Bootstrap, but somehow the eventKey doesn't recognise the values and the tabs aren't clickable. Here's the code.

var tabButtons = tabsList.map(function(text, index){
                        if(text.enabled==1)
                        { 
                        return <NavItem eventKey={index} key={index}><center> {text.value}</center></NavItem>; }
                      });

Here tabList is an array which contains information about whether the button is enabled. If yes, then display the button information.

The code where I am calling these tabs.

render() {

        return (
            <div>
                <Tab.Container id="tab" defaultActiveKey="0">
                <Row className="show-grid">
                  <Col sm={12}>
                    <Nav bsStyle="tabs" justified>
                      {tabButtons}
                    </Nav>
                  </Col>

                  <Col sm={12}>
                    <Tab.Content animation>
                      <Tab.Pane eventKey="0">
                       <FirstTabContent />
                      </Tab.Pane>
                      <Tab.Pane eventKey="1">
                       Second
                      </Tab.Pane>
                      <Tab.Pane eventKey="2">
                         <ThirdTabContent />
                      </Tab.Pane>


                    </Tab.Content>
                  </Col>
                </Row>
                </Tab.Container>
            </div>
            );

I have no idea, why aren't the eventKey able to use the index values. Anything I am missing? Another approach perhaps?

Answer 1

Apparently after some hit and tries, got it working.

The problem was indeed in eventKey.

Replaced eventKey="0" with eventKey={0}

Though I have no idea what difference it makes. Anyone?