title: setstate after splice with react
body: <p>I did a delete that works perfectly using react. Problem is after the delete I want to set the state to the new extraitMP3 to refresh and show automatically results after the Delete. This is the function of the delete :</p>
  
  <pre><code> showDeleteConfirmation(value, id,idJson,thisHandler) {
      confirm({
        title: 'Voulez vous supprimer cette audio ?',
        content: '',
        okText: 'Oui, je confirme',
        okType: 'danger',
        cancelText: 'Non',
        onOk() {
          deleteMp3Request(id);
  
          var {extraitMP3} = thisHandler.state;
          Object.keys(extraitMP3).map(ids =&gt; {
            return(
            Object.keys(extraitMP3[ids].TypeMp3List).splice(idJson, 1)  
                  )
          })
          thisHandler.setState({extraitMP3: extraitMP3})
  
          console.log('extraitMP3',extraitMP3)
          NotificationManager.success("le fichier audio est supprimé avec succès !", "");
        },
        onCancel() {
        },
      });
    }
  </code></pre>
  
  <p>this is the JSON i am mapping :</p>
  
  <p><a href="https://i.stack.imgur.com/bv9Pk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bv9Pk.png" alt="enter image description here"></a></p>
  
  <p>this is also my return</p>
  
  <pre><code> return (
  &lt;div&gt;
        {loader ? &lt;CircularProgress className="gx-loader-400" /&gt; : Object.keys(extraitMP3).map(ids =&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,idJson,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;
      )
  </code></pre>
  
  <p>Any help would be appreciated.</p>