How to update reactstrap tabs state in map function

Question

I've used reactstrap Tabs in the map function. When I change the tab, all the Tabs are changed. This is because, when I change the state on click, the state is changed for all the Tabs.

Here is my screenshot:

I've also tried with a similar problem, but I was failed.

https://stackblitz.com/edit/react-puqfqg?file=index.js

Here is my code:

import jsonData from './customData.json';
class ClassName extends Component {
    constructor(props) {
        super();
        this.state = {
            activeTab: '1'
        };
        this.toggle = this.toggle.bind(this);
    }


    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab
            });
        }
    }

    render() {
        return (
             <div>
                {
                  jsonData.map((data, index) => (
                     <Nav tabs>
                       <NavItem>
                         <NavLink className={({active: this.state.activeTab === '1'})} onClick={() => {this.toggle('1');}}>
Tab 1</NavLink>
                       </NavItem>
                       <NavItem>
                         <NavLink className={({active: this.state.activeTab === '2'})} onClick={() => {this.toggle('2');}}>
Tab 2</NavLink>
                       </NavItem>
                     </Nav>
                     <TabContent activeTab={this.state.activeTab}>
                       <TabPane tabId="1">
                         {data.description}
                       </TabPane>
                       <TabPane tabId="2">
                         {data.image}
                       </TabPane>
                     </TabContent>
                  ))
                }
             </div>
        )
    }
}

export default ClassName;

@SultanH. First of all, I am sorry for my poor English. When I clicked on the tab, all the tabs are changed. Here is my screenshot link, which will help you to understand my problem. https://drive.google.com/file/d/1uNNnKxvyy3Vq3crpUrT2sCoi0RIpw_aC/view?usp=sharing https://drive.google.com/file/d/1rrE1m2I-ogTDMV3XHP-Pap5SU3JoiW0i/view?usp=sharing — M.Kaisar, Jul 21 '19 at 20:39

score 0 · Answer 1 · answered Jul 22 '19 at 14:18

0

I am not familiar with the library you are using but at a quick glance, it seems you are wrapping the entire tab menu logic in the map function. Try mapping the “tabs items” only.

Example:

<Nav tabs>
  {jsonData.map((data, index) => (<NavItem ....}
 </Nav>

Sorry for not completed example as I am on mobile device

answered Jul 22 '19 at 14:18

Reactify

29
1
5

Thanks for the answer, but I've to wrap the entire tab in map function. This library is simply bootstrap. – M.Kaisar Jul 22 '19 at 14:27
Looking at the docs, it looks like you have to separate the concept of
From . You currently have the logic wrapped in a single map function
– Reactify Jul 22 '19 at 14:49
Above recommendation is correct to build the “tabs”. You would then need similar logic to build TabContent. I can provide an example a bit later when I am in front of a computer – Reactify Jul 22 '19 at 14:55
You are absolutely right, but I've to wrap the entire tab into the map function because of this tabs are my child element. Please look at the screenshot link, it will help to understand [link](https://photos.app.goo.gl/76sNxupm4cg3Sho47) – M.Kaisar Jul 23 '19 at 05:54

How to update reactstrap tabs state in map function

1 Answers1