Explaining a code in REACT

import React, { Component } from "react";
import FriendCard from "./components/FriendCard";
import Wrapper from "./components/Wrapper";
import Title from "./components/Title";
import friends from "./friends.json";
import "./App.css";

class App extends Component {
  // Setting this.state.friends to the friends json array
  state = {
    friends
  };

  removeFriend = id => {
    // Filter this.state.friends for friends with an id not equal to the id being removed
    const friends = this.state.friends.filter(friend => friend.id !== id);
    // Set this.state.friends equal to the new friends array
    this.setState({ friends });
  };

  // Map over this.state.friends and render a FriendCard component for each friend object
  render() {
    return (
      <Wrapper>
        <Title>Friends List</Title>
        {this.state.friends.map(friend => (
          <FriendCard
            removeFriend={this.removeFriend}
            id={friend.id}
            key={friend.id}
            name={friend.name}
            image={friend.image}
            occupation={friend.occupation}
            location={friend.location}
          />
        ))}
      </Wrapper>
    );
  }
}

export default App;

The code snippet below allows me to click on a card (bootstrap-css) and delete the card. It works! But my logical thinking or approach is on click, delete this card . I don't see that in this code but it works. I'm not coming from a programming background.

I hope some one can explain it to me and make sense of it in laymens term if you suppose. And maybe direct me me to a few more examples. Thanks in advance.

 removeFriend = id => {

    const friends = this.state.friends.filter(friend => friend.id !== 
id);
     this.setState({ friends });
  };

And the totality down below: