[SOLVED] When clicking on any other tabs, React tabs reset/clears all form input fields

When clicking on any other tabs, React tabs reset/clears all form input fields

I wanted to add tab menu so I decided to go with React Tabs. The following is how code is structured. The problem is when I click on tab 2, tab 1 form input gets reset/cleared. The same happens if I click on tab 3 all other tabs will get reset/cleared. Is there a way I can prevent this from happening?

<Tabs>
    <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
    </TabList>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
    <TabPanel>
        <input type="text"/>
    </TabPanel>
</Tabs>

Solution

Change your code to

<Tabs forceRenderTabPanel={true}>
<TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
    <Tab>Tab 3</Tab>
</TabList>
<TabPanel>
    <input type="text"/>
</TabPanel>
<TabPanel>
    <input type="text"/>
</TabPanel>
<TabPanel>
    <input type="text"/>
</TabPanel>
</Tabs>

For more information check https://github.com/reactjs/react-tabs#forcerendertabpanel-boolean