title: How can I delete a React Class Component from its Parent Class OnClick of Delete button
body: <p>I have a project that I'm using PHP and React on it, it consists on making a CRUD system with AJAX Calls.</p>
  <p><a href="https://i.stack.imgur.com/U1PRp.jpg" rel="nofollow noreferrer">This is the interface I made so far</a></p>
  <p>The problem is that when I click delete, the request is sent and the data row is deleted, but when the parent refreshes it doesn't remove the deleted item from the list.</p>
  <p>This is the User class component (for each row):</p>
  <pre><code>    class User extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              isEditing: false,
  
              id: this.props.id,
              username: this.props.username,
              email: this.props.email,
              password: this.props.password,
  
              refID: '',
              refUsername: '',
              refEmail: '',
              refPassword: ''   
          };
  
          this.refID = this.props.id;
          this.refUsername = this.props.username;
          this.refEmail = this.props.email;
          this.refPassword = this.props.password;
  
          this.handleDelete = this.handleDelete.bind(this);
      }
  
  
      handleEdit() {
          this.setState({isEditing: true});
      }
  
  
      handleDelete() {
          $.ajax({  
              type: 'POST',
              url: 'http://localhost/CRUD/server/api/delete.php',
              data: {
                  id: this.state.id
              },
              success: function(response) {
                  toast.success('User deleted successfully!', {
                      position: &quot;bottom-left&quot;,
                      autoClose: 3000,
                      hideProgressBar: true,
                      closeOnClick: true,
                      pauseOnHover: true,
                      draggable: true,
                      progress: undefined,
                      icon: CheckCircleIcon
                  });
                  console.log(response);
  
                  // Remove the user from the list.
                  
              },
              error: function(jqXHR, textStatus, errorThrown){
                  toast.error('Error deleting user!', {
                      position: &quot;bottom-left&quot;,
                      autoClose: 3000,
                      hideProgressBar: true,
                      closeOnClick: true,
                      pauseOnHover: true,
                      draggable: true,
                      progress: undefined,
                      icon: CheckCircleIcon
                  });
                  console.log(' response: ', jqXHR, textStatus, errorThrown)
  
                  return false;
              }
          })
  
          this.props.rerender();
      }
  
      handleCancel() {
          this.setState({
              isEditing: false
          });
      }
  
      handleSave() {
          $.ajax({  
              type: 'POST',
              url: 'http://localhost/CRUD/server/api/update.php', 
              data: {
                  id: this.refID,
                  username: this.refUsername,
                  email: this.refEmail,
                  password: this.refPassword
              },
              success: function() {
                  toast.success(&quot;Successfully updated the user information.&quot;,{
                      position: &quot;bottom-left&quot;,
                      autoClose: 3000,
                      hideProgressBar: true,
                      closeOnClick: true,
                      pauseOnHover: true,
                      draggable: true,
                      progress: undefined,
                      icon: CheckCircleIcon
                      });
              },
              error: function(jqXHR, textStatus, errorThrown){
                  toast.error(&quot;Error updating the user information.&quot;);
                  console.log(' response: ', jqXHR, textStatus, errorThrown)
              }
          })
          // Update the state with the new values. As well as changing the display back to the original.
          this.setState({isEditing: false, id: this.refID, username: this.refUsername, email: this.refEmail, password: this.refPassword});
      }
  
  
  
      
      render() {
          let DisplayMode, EditMode;
  
          
  
          DisplayMode = (
              &lt;div className=&quot;Row&quot;&gt;
                  &lt;div className=&quot;Cell C1&quot; id='DataID'&gt;
                      &lt;p&gt;{this.state.id}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;Cell C2&quot; id='DataUsername'&gt;
                      &lt;p&gt;{this.state.username}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;Cell C3&quot; id='DataEmail'&gt;
                      &lt;p&gt;{this.state.email}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;Cell C4&quot; id='DataPassword'&gt;
                      &lt;p&gt;{this.state.password}&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;Cell C5&quot; id='DataActions'&gt;
                      &lt;div className=&quot;Button Secondary Edit&quot;&gt;
                          {/* On click of the Edit button, switch the cells with inputs, and change the buttons to save button*/}
                          &lt;EditIcon onClick={() =&gt; this.handleEdit()} /&gt;
                      &lt;/div&gt;
      
                      &lt;div className=&quot;Button Primary Delete&quot;&gt;
                          &lt;DeleteIcon onClick={() =&gt; this.handleDelete()} /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
  
          EditMode = (
              &lt;div className=&quot;Row EditMode&quot;&gt;
  
                  &lt;div className=&quot;Cell C1&quot; id=&quot;DataID&quot;&gt;
                      &lt;p&gt;{this.props.id}&lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;Cell C2 Editing&quot; id=&quot;DataUsername&quot;&gt;
                      &lt;input type='text' placeholder='Edit username' defaultValue={this.state.username} onChange={e =&gt; {this.refUsername = e.target.value}}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;Cell C3 Editing&quot; id=&quot;DataEmail&quot;&gt;
                      &lt;input type='text' placeholder='Edit e-mail' defaultValue={this.state.email} onChange={e =&gt; {this.refEmail = e.target.value}}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;Cell C4 Editing&quot; id=&quot;DataPassword&quot;&gt;
                      &lt;input type='text' placeholder='Edit password' defaultValue={this.state.password} onChange={e =&gt; {this.refPassword = e.target.value}}/&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;Cell C5&quot; id=&quot;DataActions&quot;&gt;
                      &lt;div className=&quot;Button Secondary Edit&quot;&gt;
                          &lt;CancelIcon onClick={() =&gt; this.handleCancel()}/&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;Button Primary Delete&quot;&gt;
                          &lt;SaveIcon onClick= {() =&gt; this.handleSave()} /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          );
          
          const CurrentMode = () =&gt; { 
              return(
                  this.state.isEditing ? EditMode : DisplayMode
              )
           };
  
          return (
              &lt;&gt;
                  &lt;CurrentMode/&gt;
              &lt;/&gt;
          );
      };
  };
  </code></pre>
  <p>And this is the code of the Parent class (For the entire table):</p>
  <pre><code>class UsersListView extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              isLoaded: false,
              error: null,
              users: [],
              counter: 0,
              isLoading: false
          };
  
          this.handleRefresh = this.handleRefresh.bind(this);
          
      };
  
      rerender = () =&gt; {
          this.forceUpdate();
      };
      forceUpdate = () =&gt; {
          this.setState((state) =&gt; ({
              counter: state.counter + 1,
              isLoaded: false
          }));
      };
  
      componentDidMount() {
          this.handleRefresh();
      }
  
      componentDidUpdate() {
          console.log(&quot;Updated&quot;);
          () =&gt; {
              this.handleRefresh();
          }, [this.state.users]
      };
  
  
      handleRefresh() {
          fetch(&quot;http://localhost/CRUD/server/api/read.php&quot;)
          .then(res =&gt; res.json())
          .then((result) =&gt; {
              this.setState({
                  isLoading: false,
                  isLoaded: true,
                  users: result
              });
          },
          (error) =&gt; {
              this.setState({
                  isLoading: false,
                  isLoaded: false,
                  error
              });
              console.log(error)
          }
          )
  
          this.forceUpdate();
      }
  
  
  
      
      render() {
  
          return this.state.isLoaded ?
                  // If the data is loaded, render the users.        
                  
                      this.state.users.map((user) =&gt; {
                          return (
                              &lt;User 
                                  rerender={this.rerender} 
                                  key={user.id} 
                                  id={user.id} 
                                  username={user.username} 
                                  email={user.email} 
                                  password={user.password}
                              /&gt;
                          )
                      }) 
                  // If the data is not loaded, display a loading message.
                  : (
  
                  &lt;div className='User-Loading'&gt;
                     &lt;div className='Loading'&gt;
                          &lt;div className=&quot;loader&quot;&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                              &lt;span&gt;&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div className='User-Loading-Text'&gt;
                          &lt;h3&gt;Loading...&lt;/h3&gt;
  
                          &lt;p&gt;Taking too long? Check the API link if is connected.&lt;/p&gt;
  
                          &lt;div className='button' onClick={this.handleRefresh}&gt;
                              &lt;RefreshIcon/&gt;
                              Retry
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  )
      }
  }
  
  export default UsersListView;
  </code></pre>
  <h2>Heading ##UPDATES:</h2>
  <p>I brought the <code>handleDelete()</code> function to the parent class, and I called it using the props of the child component, and it worked.</p>
  <p>I also updated the state of the parent to solve the main issue of removing the row after each delete.</p>