Question 185939 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – React Tab component not updating active tab when Redux store value changes

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

Here is the code for 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>
  );
}
Tags:

2

Answers


  1. 0

    The defaultIndex prop is:

    The initial index of the selected tab (in uncontrolled mode)

    See Controlled and uncontrolled components and Default Values doc:

    In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue attribute instead of value. Changing the value of defaultValue attribute after a component has mounted will not cause any update of the value in the DOM.

    You can use Controlled Tabs

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

<Tabs 
  index={tabIndex} 
  onChange={(index) => dispatch({ type: 'SET_TAB_INDEX', payload: { index } })}>
</Tabs>
    Login or Signup to reply.
  2. 0 
    To ensure that the active tab in your Chakra UI Tab component updates when the number value changes in Redux, 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 specific dependencies change.

You can modify your 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 action (updateNumber) whenever the number value changes. Ensure that you have implemented the corresponding action and reducer logic (selectNumber) in your Redux slice to handle the number updates.

By doing this, the active tab will be automatically updated based on the number value stored in Redux.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search