title: Refresh a tab and not the ReactJs Ajax page
body: <p>I am currently experiencing a problem. I use ReactJs and Ajax but the problem is that on the same page I have 4 tabs. Each tab is a page.
  To summarize I have a page that matters 4.
  Except that in one of its tabs I have to delete a credit card so once I select the card and I click on the delete button I want it refreshes that my tab but he raffrachi the main page and my tab n ' is more open. So I thought about putting a location.reload () but it refreshed the whole page and does not solve my problem because the active tab closes. 
  I give you the code and some pictures for understanding. </p>
  
  <p>Before refresh:
  <a href="https://i.stack.imgur.com/fDi70.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>After refresh:
  <a href="https://i.stack.imgur.com/XeA39.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>While I want it refreshes only tab "means of payment" here is my code:</p>
  
  <pre><code>handleCardDelete = () =&gt; {
  var numCard = $('input[name=rbCard]:checked').val();
  console.log(this.state.token);
   $.ajax({
      url: 'http://API.....,
  
      dataType: 'json',
  
      type: 'DELETE',
  
      headers: {
          'Authorization' : 'Bearer ' + this.state.token
      },
  
      complete: function(){
          alert("carte supprimée avec succès");
          window.location.reload();
      },
  
  });
  </code></pre>
  
  <p>};</p>
  
  <p>My ReactJs Tab:</p>
  
  <pre><code>&lt;Button animated='fade' onClick={this.handleAddCardSubmit}&gt;
          &lt;Button.Content visible&gt;
              Ajouter une carte
          &lt;/Button.Content&gt;
          &lt;Button.Content hidden&gt;
              &lt;Icon name='add' /&gt;
          &lt;/Button.Content&gt;
      &lt;/Button&gt;
  
      &lt;Button animated='fade' onClick={this.handleCardDelete}&gt;
          &lt;Button.Content visible&gt;
              Supprimer la carte
          &lt;/Button.Content&gt;
          &lt;Button.Content hidden&gt;
              &lt;Icon name='delete' /&gt;
          &lt;/Button.Content&gt;
  </code></pre>
  
  <p></p>
  
  <p>My ReactJs "Home" Page:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>handleItemClick = (e, { name }) =&gt; {
      this.setState({activeItem: name});
      if(name === 'Profil'){
        this.setState({fluxActif: &lt;MonProfil/&gt;});
      }
      if(name === 'MoyenDePaiement'){
            this.setState({fluxActif: &lt;MoyenDePaiement/&gt;});
        }
    };
    componentWillMount(){
      const token = localStorage.token;
      this.setState({token});
  
    };
    render() {
  
      return (
        &lt;div&gt;
          &lt;Menu className="MonCompteMenu"&gt;
            &lt;h2&gt;Mon Compte&lt;/h2&gt;
          &lt;/Menu&gt;
          &lt;Grid&gt;
            &lt;Grid.Column width={3}&gt;
              &lt;Menu fluid vertical tabular&gt;
                &lt;Menu.Item  name='Profil' active={this.state.activeItem === 'Profil'} onClick={this.handleItemClick} &gt;&lt;p&gt;Mon Profil&lt;/p&gt;
                &lt;/Menu.Item&gt;
                &lt;Menu.Item  name='MoyenDePaiement' active={this.state.activeItem === 'MoyenDePaiement'} onClick={this.handleItemClick} &gt;&lt;p id="MoyenDePaiement"&gt;Moyen de paiement&lt;/p&gt;
                &lt;/Menu.Item&gt;
              &lt;/Menu&gt;
            &lt;/Grid.Column&gt;
  
            &lt;Grid.Column stretched width={13}&gt;
              &lt;Segment &gt;
                {this.state.fluxActif}
              &lt;/Segment&gt;
            &lt;/Grid.Column&gt;
          &lt;/Grid&gt;
        &lt;/div&gt;
      )
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I continue my research. I thank you in advance.</p>