How do I switch between react-bootstrap tabs using a button in the tab content?

Question

I am using react-bootstrap Tabs and Tab to build a 3 tab display with basic content. First two tabs will have an input box and a button. After entering some detail in the input box, i want to click on the Save button to go to the next tab.

I am using React state but somehow every-time, i click on the Save button it takes me to the second tab for a second and then since the useState causes a re-render, my component is set to the initial first state instead of navigating and remaining on the second state.

How do i get my component to persist and stay on the second state and then do the same thing there and move on to the last state?

Pasting code as below:

import React, { useState, useEffect } from 'react';
import Tabs from 'react-bootstrap/Tabs';
import Tab from 'react-bootstrap/Tab';


const ThreeTabbedForm = () => {
    const [activeTab, setActiveTab] = useState('shipping');
    const [shipInfo, setShipInfo] = useState('');
    const [payInfo, setPayInfo] = useState('');

    function toNextTab() {
        handleTabChange();
    }

    function handleTabChange() {
        if (activeTab === 'shipping') {
            setActiveTab('payment');
        }
        if (activeTab === 'payment') {
            setActiveTab('order');
        }
    }

    return (
        <Tabs activeKey={activeTab} onSelect={(k) => handleTabChange}>
            <Tab title="Shipping Info" eventKey="shipping" id="shipping-tab">
                <form>
                    <input type="text" value={shipInfo} placeholder="Shipping info" onChange={e => setShipInfo(e.target.value)} required />
                    <button onClick={toNextTab} style={{ display: 'block' }}>Save</button>
                </form>
            </Tab>

            <Tab title="Payment Info" eventKey="payment" id="payment-tab">
                <form>
                    <input type="text" value={payInfo} onChange={e => setPayInfo(e.target.value)} placeholder="Payment info" />
                    <button onClick={toNextTab} style={{ display: 'block' }}>Save</button>
                    <p>Shipping info: {shipInfo}</p>
                </form>
            </Tab>

            <Tab title="Order Info" eventKey="order" id="order-tab">
                <form>
                    <h2>Order placed successfully</h2>
                    <p>Shipping info: {shipInfo}</p>
                    <p>Payment info: {payInfo}</p>
                </form>
            </Tab>
        </Tabs>
    )
}

export default ThreeTabbedForm

bas · Accepted Answer · 2020-08-09 13:52:57Z

1

You can use event.preventDefault() to stop the page from reloading like this:

function toNextTab(e) {
  e.preventDefault();
  handleTabChange();
}

// ...

<button onClick={e => toNextTab(e)} style={{ display: 'block' }}>
  Save
</button>

// ... repeat for your other buttons

So basically you don't have to persist these values if the page doesn't reload.

edited Aug 9, 2020 at 13:52

answered Aug 9, 2020 at 13:37

bas

15.2k7 gold badges27 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ajitesh Chhatani Over a year ago

Hey that was an unintended piece that snuck in from earlier when i was trying something out. But for confirmation, i removed that and tried again and the problem still persists.

bas Over a year ago

Okay can you edit your question to reflect your current codebase?

devd · Accepted Answer · 2020-08-09 13:56:30Z

0

It is not because of re-rendering because re-rendering does not reset the state. It is because of re-loading. Please use event.preventDefault()

answered Aug 9, 2020 at 13:56

devd

7034 silver badges11 bronze badges

Comments

George · Accepted Answer · 2020-12-01 12:21:53Z

0

add event.preventDefault() like Mr.Bas van der Linden mentioned.
don't use defaultActiveKey={something} it's not working
the one worked fine is activeKey={activeTab}
and your code should work just fine with this small modification

answered Dec 1, 2020 at 12:21

George

351 silver badge5 bronze badges

Comments

Subhasis Das · Accepted Answer · 2021-09-20 11:34:37Z

0

You can set the props mountOnEnter and unmountOnExit as true on the Tab component.

answered Sep 20, 2021 at 11:34

Subhasis Das

3445 silver badges16 bronze badges

Collectives™ on Stack Overflow

How do I switch between react-bootstrap tabs using a button in the tab content?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related