title: Reload table after deleting an item from it with React
body: <p>Using React.Js, I created a delete function to delete an item from a table. the delete is working fine but what I want to do is that after deleting I want the tables to be dynamically updated to show only the items left. Now after the delete I have to refresh manually the page or go to another page and comeback to see the items left after the delete</p>
  
  <p>This is the code built so far :</p>
  
  <pre><code>import React, { Component } from "react";
  import { Card, Button, Select,/*  message, */ Form, Tooltip } from "antd";
  import extraitMP3 from "./data";
  import { arrayMove, SortableHandle } from "react-sortable-hoc";
  import ContainerHeader from "components/ContainerHeader/index";
  import { getExtraitMp3, hideMessageUpdate, showUpdateLoader, updateMp3Visibilite } from "appRedux/actions/Comedien";
  import { deleteMp3Request } from "../../../appRedux/services/extraitMp3Service"
  import { connect } from "react-redux";
  import { NotificationContainer, NotificationManager } from "react-notifications";
  import { userSignOut } from "appRedux/actions/Auth";
  import { displayIcon } from '../../../util/Icon.js';
  import CircularProgress from "components/CircularProgress";
  import { Modal } from "antd";
  
  const extraitMP32 = [extraitMP3];
  const confirm = Modal.confirm;
  const Option = Select.Option;
  
  const DragHandle = SortableHandle(() =&gt;
    &lt;span className="gx-draggable-icon gx-pt-2"&gt;
      &lt;i className="icon icon-menu" style={{ fontSize: 25 }} /&gt;
    &lt;/span&gt;);
  
  class ListExtrait extends Component {
  
    onSortEnd = ({ oldIndex, newIndex }) =&gt; {
      this.setState({
        extraitMP3: arrayMove(this.state.extraitMP3, oldIndex, newIndex),
  
      });
    };
  
    constructor() {
      super();
      this.state = {
        extraitMP3: extraitMP32[0],
        nombreMP3: {
          rechercheExtraits: 0,
          recherchePossible: 0,
          extraitFiche: 0,
          extraitFichePossible: '',
          extraitArchives: 0,
          extraitArchivesPossible: '',
        },
        loader: false,
  
      }
    }
  
    componentDidMount() {
      this.props.getExtraitMp3();
    }
  
    componentDidUpdate() {
    }
  
    static getDerivedStateFromProps(nextProps, prevState,/* nextProps2,prevState2 */) {
      if (nextProps.extraitMP3 !== prevState.extraitMP3 &amp;&amp; nextProps.extraitMP3) {
        return { extraitMP3: nextProps.extraitMP3 };
      }
      else return null;
    }
    showDeleteConfirmation(value, id, index, thisHandler) {
      confirm({
        title: 'Voulez vous supprimer cette audio ?',
        content: '',
        okText: 'Oui, je confirme',
        okType: 'danger',
        cancelText: 'Non',
        onOk() {
          deleteMp3Request(id);
          const { extraitMP3 } = thisHandler.state;
          Object.keys(extraitMP3).splice(index, 1);
          NotificationManager.success("le fichier audio est supprimé avec succès !", "");
        },
        onCancel() {
        },
      });
    }
  
    handleSubmit = (e) =&gt; {
      e.preventDefault();
      this.props.form.validateFields((err, values) =&gt; {
  
        if (!err) {
          this.props.showUpdateLoader();
          this.props.updateMp3Visibilite(values);
        }
      });
    };
  
    render() {
  
      const { loader, extraitMP3 } = this.state;
      const selectOptions = new Map([
        [1, "Visible dans la recherche et sur ma fiche"],
        [2, "Visible sur ma fiche uniquement"],
        [3, "Masqué"],
      ]);
      console.log('extraitMP3', extraitMP3)
  
  
      function handleChangeSelect(value) {
        console.log(`selected ${value}`);
      }
  
      return (
        &lt;div&gt;
          {loader ? &lt;CircularProgress className="gx-loader-400" /&gt; : Object.keys(extraitMP3).map((ids, index) =&gt; {
            return (
              &lt;Card&gt;
  
                &lt;li key={ids}&gt;
                  &lt;Card styleName="gx-card-list icon icon-data-display gx-mr-2 gx-text-blue gx-fs-xl"&gt;
                    &lt;div className="gx-media-body"&gt;
                      {extraitMP3[ids].Typenom}
                      &amp;nbsp;
                    {extraitMP3[ids].TypeIcon != null &amp;&amp;
                        displayIcon(extraitMP3[ids].TypeIcon)
                      }
                    &lt;/div&gt;
  
                    {Object.keys(extraitMP3[ids].TypeMp3List).map(idJson =&gt; {
                      return (
                        &lt;div className="gx-main-content gx-mb-4"&gt;
                          &lt;ContainerHeader match={this.props.match} /&gt;
                          &lt;div className="gx-contact-item gx-dragndrop-item"&gt;
  
                            &lt;DragHandle /&gt;
  
                            &lt;div className="gx-col gx-job-title "&gt;
                              {extraitMP3[ids].TypeMp3List[idJson].intitule}
                            &lt;/div&gt;
  
                            {extraitMP3[ids].TypeMp3List[idJson].interpretation1Icon !== '' &amp;&amp;
                              &lt;Tooltip title={extraitMP3[ids].TypeMp3List[idJson].interpretation1Nom}&gt;
                                {displayIcon(extraitMP3[ids].TypeMp3List[idJson].interpretation1Icon)}
                              &lt;/Tooltip&gt;
                            }
  
                            {extraitMP3[ids].TypeMp3List[idJson].interpretation2Icon !== '' &amp;&amp;
                              &lt;Tooltip title={extraitMP3[ids].TypeMp3List[idJson].interpretation2Nom}&gt;
                                {displayIcon(extraitMP3[ids].TypeMp3List[idJson].interpretation2Icon)}
                              &lt;/Tooltip&gt;
                            }
  
                            {extraitMP3[ids].TypeMp3List[idJson].interpretation3Icon !== '' &amp;&amp;
                              &lt;Tooltip title={extraitMP3[ids].TypeMp3List[idJson].interpretation3Nom}&gt;
                                {displayIcon(extraitMP3[ids].TypeMp3List[idJson].interpretation3Icon)}
                              &lt;/Tooltip&gt;
                            }
  
                            {extraitMP3[ids].TypeMp3List[idJson].langueIcon !== '' &amp;&amp;
                              &lt;div className="gx-col gx-job-title  gx-d-sm-flex gx-text-truncate gx-px-8"&gt;
                                &lt;Tooltip title={extraitMP3[ids].TypeMp3List[idJson].langueNom}&gt;
                                  &lt;i className={`flag flag-24 gx-mr-2 ${extraitMP3[ids].TypeMp3List[idJson].langueIcon}`} /&gt;
                                &lt;/Tooltip&gt;
                              &lt;/div&gt;
                            }
  
                            &lt;div className="gx-col gx-job-title  gx-d-sm-flex gx-text-truncate gx-px-8"&gt;
                              &lt;Select
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="Selection la choix de votre numÃ©ro de tÃ©lÃ©phone "
                                optionFilterProp="children"
                                onChange={handleChangeSelect}
                                defaultValue={selectOptions.get(extraitMP3[ids].TypeMp3List[idJson].visibilite)}
                                filterOption={(input, Option) =&gt; Option.props.children.toLowerCase().indexOf(input.toLowerCase()) &gt;= 0}
                              &gt;
                                {[...selectOptions].map(([value, label]) =&gt; &lt;Option value={value}&gt; {label} &lt;/Option&gt;)}
                              &lt;/Select&gt;
                            &lt;/div&gt;
  
                            &lt;div className="gx-col gx-job-title  gx-d-sm-flex gx-text-truncate gx-px-8"&gt;
                              &lt;i className="icon icon-edit gx-fs-xl gx-text-gris" /&gt;
                            &lt;/div&gt;
  
                            &lt;div className="gx-col gx-job-title  gx-d-sm-flex gx-text-truncate gx-px-8"&gt;
                              &lt;span className="gx-pointer"&gt;
                                &lt;i className="icon icon-trash gx-pointer gx-text-danger gx-fs-xxl"
                                  id={extraitMP3[ids].TypeMp3List[idJson].id}
                                  onClick={e =&gt; this.showDeleteConfirmation(e.target.value, extraitMP3[ids].TypeMp3List[idJson].id, index, this)} /&gt;
                              &lt;/span&gt;
                            &lt;/div&gt;
  
                          &lt;/div&gt;
  
                        &lt;/div&gt;
                      )
                    })}
                    &lt;NotificationContainer /&gt;
  
                    &lt;Button type="primary" htmlType="submit" labelCol={{ xs: 24, sm: 5 }} wrapperCol={{ xs: 24, sm: 12 }}&gt;
                      Enregistrer
                  &lt;/Button&gt;
                  &lt;/Card&gt;
                &lt;/li&gt;
              &lt;/Card&gt;
            )
          })}&lt;/div&gt;
      )
    }
  }
  
  const VisibiliteFormMp3 = Form.create()(ListExtrait);
  
  const mapStateToProps = ({ comedien }) =&gt; {
    const {
      extraitMP3,
      alertMessageUpdate,
      showMessageUpdate
    } = comedien;
    return {
      extraitMP3,
      alertMessageUpdate,
      showMessageUpdate
    }
  };
  
  export default connect(
    mapStateToProps,
    {
      userSignOut,
      getExtraitMp3,
      hideMessageUpdate,
      showUpdateLoader,
      updateMp3Visibilite
    })(VisibiliteFormMp3);
  </code></pre>
  
  <p>extraitMP3 is an object of objects that's why I used <code>Object.keys(extraitMP3)</code>
  I didn't know how to update the state correctly.
  this is the view :</p>
  
  <p><a href="https://i.stack.imgur.com/DcgGi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DcgGi.png" alt="enter image description here"></a></p>