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

Question

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()}
/>

This is exactly what the documents recommend (except I can't see where this.panes()) comes from. Is it supposed to return pains?) What's your issue? — Justin Smith
– Justin Smith, Commented Apr 8, 2019 at 9:59
@JustinSmith what exactly documents recommend? I'm passing props to a component , when I switching tab , I need to rerender component with new props — Yerlan Yeszhanov
– Yerlan Yeszhanov, Commented Apr 8, 2019 at 10:12

Justin Smith · Accepted Answer · 2019-04-08 13:59:16Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related