title: How to make a tabs if clicked it will refresh or reload?
body: <p>how do I click tabs to refresh or retrieve new data using the ant design framework <a href="https://ant.design/components/tabs/" rel="nofollow noreferrer">https://ant.design/components/tabs/</a></p>
  
  <p>this my picture tabs
  <a href="https://i.stack.imgur.com/kbsf9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kbsf9.png" alt="enter image description here"></a></p>
  
  <p>and this code</p>
  
  <p>I have made the handle change function, maybe what is wrong with my logic? ... if it is wrong how to correct it, so if clicked on the tab it will refresh or retrieve new data</p>
  
  <pre><code>import React, { Component } from "react";
  import { Tabs } from "antd";
  import { CustomTabPane } from "../../components/CustomTabDashboard";
  import OrderListWaitingInDelivery from "../OrderListWaitingInDelivery";
  import OrderListWaitingFinish from "../OrderListWaitingFinish";
  import OrderListWaitingNotSent from "../OrderListWaitingNotSent";
  import OrderListWaitingNotPay from "../OrderListWaitingNotPay";
  import OrderDetailsDashboard from "../OrderDetailsDashboard";
  import OrderDetailsCancel from "../OrderDetailsCancel";
  import OrderListWaitingCancel from "../OrderListWaitingCancel";
  
  
  class CustomerOderNavigation extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isShowOrderDetailsDashboard: false,
        orderId: null,
        activeKey: "1"
      };
    }
  
  
    componentWillUnmount() {
      this.setState({
        loading: false
      });
    }
  
    actionShowOrderListWaiting = () =&gt; {
      this.setState({
        isShowOrderDetailsDashboard: !this.state.isShowOrderDetailsDashboard
      });
    };
  
    actionShowOrderDetailsDashboard = (orderId) =&gt; {
      this.actionShowOrderListWaiting();
      this.setState({
        orderId: orderId
      })
    };
  
    handleChange = (selectedkey) =&gt; {
      this.setState({ activeKey: selectedkey });
      console.log("change callback");
    };
  
  
  
    render() {
      return (
        &lt;Tabs activeKey={this.state.activeKey} onChange={this.handleChange}&gt;
          &lt;CustomTabPane
            key={"1"}
            tab={
              &lt;span
                onClick={() =&gt;
                  this.setState({
                    isShowOrderDetailsDashboard: false
                  })}
              &gt;{"Belum Bayar"}&lt;/span&gt;}
            my_prop={
              this.state.isShowOrderDetailsDashboard === false ?
                (&lt;OrderListWaitingNotPay
                  actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                  tabsNotPay={1}
                /&gt;) : (
                  &lt;OrderDetailsDashboard
                    orderId={this.state.orderId}
                    actionShowOrderListWaiting={() =&gt; this.actionShowOrderListWaiting()}
                    tabsNotPay={1}
                  /&gt;)
            }
          /&gt;
          &lt;CustomTabPane
            key={"2"}
            tab={&lt;span
              onClick={() =&gt;
                this.setState({
                  isShowOrderDetailsDashboard: false
                })}&gt;{"Belum Dikirim"}&lt;/span&gt;}
            my_prop={
              this.state.isShowOrderDetailsDashboard === false ?
                &lt;OrderListWaitingNotSent
                  actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                  tabsNotSent={2}
                /&gt; : (
                  &lt;OrderDetailsDashboard orderId={this.state.orderId}
                    actionShowOrderListWaiting={() =&gt; this.actionShowOrderListWaiting()}
                    tabsNotSent={2}
                  /&gt;
                )
            }
          /&gt;
          &lt;CustomTabPane
            key={"3"}
            tab={&lt;span
              onClick={() =&gt;
                this.setState({
                  isShowOrderDetailsDashboard: false
                })}&gt;
              {"Dalam Pengiriman"}
            &lt;/span&gt;}
            my_prop={
              this.state.isShowOrderDetailsDashboard === false ?
                &lt;OrderListWaitingInDelivery
                  actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                  tabsInDelivery={3}
                /&gt; : (
                  &lt;OrderDetailsDashboard orderId={this.state.orderId}
                    actionShowOrderListWaiting={() =&gt; this.actionShowOrderListWaiting()}
                    tabsInDelivery={3}
                  /&gt;
                )
            } /&gt;
          &lt;CustomTabPane
            key={"4"}
            tab={&lt;span
              onClick={() =&gt;
                this.setState({
                  isShowOrderDetailsDashboard: false
                })}&gt;{"Selesai"}&lt;/span&gt;}
            my_prop={
              this.state.isShowOrderDetailsDashboard === false ?
                &lt;OrderListWaitingFinish
                  actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                  tabsFinish={4}
                /&gt; : (
                  &lt;OrderDetailsDashboard orderId={this.state.orderId}
                    actionShowOrderListWaiting={() =&gt; this.actionShowOrderListWaiting()}
                    tabsFinish={4}
                  /&gt;
                )
            } /&gt;
          &lt;CustomTabPane
            key={"5"}
            tab={&lt;span
              onClick={() =&gt;
                this.setState({
                  isShowOrderDetailsDashboard: false
                })}&gt;{"Batal"}&lt;/span&gt;}
            my_prop={
              this.state.isShowOrderDetailsDashboard === false ?
                &lt;OrderListWaitingCancel
                  actionShowOrderDetailsDashboard={this.actionShowOrderDetailsDashboard}
                /&gt; : (
                  &lt;OrderDetailsCancel orderId={this.state.orderId}
                    actionShowOrderListWaiting={() =&gt; this.actionShowOrderListWaiting()}
                  /&gt;
                )
            }
          /&gt;
        &lt;/Tabs&gt;
      );
    }
  }
  
  export default CustomerOderNavigation;
  </code></pre>