React Tab component does not update active tab when Redux store value changes

Question

I am using Chakra UI Tab component in my React application. I have a numeric value stored in Redux and I want to change the active tab based on that value. However, when I update the numerical value in the store, the active tab does not change accordingly. How can I solve this problem?

Here is the code for the MyTabs component:

function MyTabs() {
  const number = useSelector(selectnumber);

  console.log(number);

  return (
    <Tabs defaultIndex={number}>
      <TabPanels>
        <TabPanel>
          <Image boxSize="200px" fit="cover" src="" />
        </TabPanel>
        <TabPanel>
          <Image boxSize="200px" fit="cover" src="" />
        </TabPanel>
      </TabPanels>
      <TabList>
        <Tab>Naruto</Tab>
        <Tab>Sasuke</Tab>
      </TabList>
    </Tabs>
  );
}

Answer 1

To ensure that the active tab in the Chakra UI Tab component is updated when the value in Redux changes, you can use the useEffect hook provided by React. The useEffect hook allows you to perform side effects such as updating the active tab when a specific dependency changes.

You can modify the MyTabs component as follows:

import { useEffect } from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@chakra-ui/react';
    import { selectNumber, updateNumber } from 'path/to/your/redux/slice';
    function MyTabs() {
      const number = useSelector(selectNumber);
      const dispatch = useDispatch();
      useEffect(() => {
        // Update the active tab index in Redux when the number changes
        dispatch(updateNumber(number));
      }, [number, dispatch]);
      return (
        <Tabs defaultIndex={number}>
          <TabPanels>
            <TabPanel>
              <Image boxSize="200px" fit="cover" src="" />
            </TabPanel>
            <TabPanel>
              <Image boxSize="200px" fit="cover" src="" />
            </TabPanel>
          </TabPanels>
          <TabList>
            <Tab>Naruto</Tab>
            <Tab>Sasuke</Tab>
          </TabList>
        </Tabs>
      );
    }**'

In this updated code, the useEffect hook is used to dispatch an operation (updateNumber) when the value changes. Make sure you have implemented the appropriate operations and reducer logic (selectNumber) in your Redux slice to handle numeric updates.

By doing this, the active tab will automatically update based on the numerical value stored in Redux.

Answer 2

defaultIndex The properties are:

See Controlled and Uncontrolled Components and Default Values ​​ Documentation:

You can use Controlled tab

const tabIndex = useSelector(selectnumber);
const dispatch = useDispatch();

<Tabs 
  index={tabIndex} 
  onChange={(index) => dispatch({ type: 'SET_TAB_INDEX', payload: { index } })}>
</Tabs>