CODEWITHSUNDEEP
javascriptreactjssemantic-ui
Yerlan Yeszhanov
Yerlan Yeszhanov

Reputation: 2439

react semantic ui, how to rerender component when switching tab?

How to rerender component when I switching tabs? I'm passing props to a component and I need to update it. Any ideas?

const panes = [
      {
        menuItem: "In process",
        render: () => (
          <Tab.Pane>
            <RespondentsData stepId="_init_" />
          </Tab.Pane>
        ),
      },
      {
        menuItem: "No answer",
        render: () => (
          <Tab.Pane>
            <RespondentsData stepId="_wait_" />
          </Tab.Pane>
        ),
      },
]

<Tab
 className="respondents-tab"
 menu={{ secondary: true, pointing: true }}
 panes={this.panes()}
/>

Upvotes: 2

Views: 1281

Answers (1)

Justin Smith
Justin Smith

Reputation: 385

You could have panes be a function that takes a prop and returns a new array of panes every time. Then, when you select a new tab, you could use onTabChange to update it like this:

const Content = ({ children }) => <h1>{children}</h1>;

const panes = count => 
   [
    {
      menuItem: "Tab 1",
      render: () => (
        <Tab.Pane>
          <Content>Count is: {count}</Content>
        </Tab.Pane>
      )
    },
    {
      menuItem: "Tab 2",
      render: () => (
        <Tab.Pane>
          <Content>Count is: {count}</Content>
        </Tab.Pane>
      )
    },
    {
      menuItem: "Tab 3",
      render: () => (
        <Tab.Pane>
          <Content>Count is: {count}</Content>
        </Tab.Pane>
      )
    }
  ];

function TabExampleSecondary() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <Tab
        onTabChange={increment}
        menu={{ secondary: true }}
        panes={panes(count)}
      />
    </div>
  );
}

Here's an working example: https://codesandbox.io/embed/6lyzz0xo2n

Upvotes: 1

Related Questions