React CRUD Remove Entry From Table

Question

I'm building a CRUD app in React (similar to the todo apps on the.net), however the main difference is I am appending each entry to a bootstrap Table . This might not be the best way to represent the data, but it helps me get off the ground quickly without having to go over some CSS styling, which I'm pretty weak at.

My goal is to be able to delete, after a warning prompt, any given entry from the Table . However, I am not sure of the best way to do this. So here is the Form to enter a player's name:

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";

const PlayerForm = ({ addPlayer }) => {
  const [name, setName] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    addPlayer(name);
    setName("");
  };
  return (
    <Form onSubmit={handleSubmit}>
      <Form.Group controlId="name">
        <Form.Label>Name</Form.Label>
        <Form.Control
          required
          type="text"
          value={name}
          placeholder="Normal text"
          onChange={(e) => setName(e.target.value)}
        />
      </Form.Group>
      <Button type="submit">Add Player</Button>
    </Form>
  );
};

export default PlayerForm;

And after that, the data goes into a PlayerList component:

import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { Table, Form } from "react-bootstrap";
import PlayerForm from "./PlayerForm";

import styled from "styled-components";
const StyledInput = styled(Form.Control)`
  padding: 2px 5px;
  width: 60px;
  height: 30px;
`;

const PlayerList = () => {
  const [players, setPlayers] = useState([
    { name: "Harry Kane", country: "England", id: 1, goals: 0, percentage: 0 },
    {
      name: "Marcus Rashford",
      country: "England",
      id: 2,
      goals: 0,
      percentage: 0,
    },
  ]);

  const addPlayer = (name) => {
    setPlayers([
      ...players,
      { name: name, id: uuidv4(), country: "England", goals: 0, percentage: 0 },
    ]);
  };

  return (
    <div>
      <Table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Total Goals</th>
            <th>Goal Percentage</th>
          </tr>
        </thead>
        <tbody>
          {players.map((player) => (
            <tr key={player.id}>
              <td>{player.name}</td>
              <td>
                <Form>
                  <Form.Group controlId="goals">
                    <StyledInput
                      size="sm"
                      required
                      type="number"
                      defaultValue={player.goals}
                      step={1}
                      className="smaller-input"
                      min="0"
                    />
                  </Form.Group>
                </Form>
              </td>
              <td>
                <Form>
                  <Form.Group controlId="goals">
                    <StyledInput
                      size="sm"
                      required
                      type="number"
                      defaultValue={player.percentage}
                      step={1}
                      className="smaller-input"
                      min="0"
                    />
                  </Form.Group>
                </Form>
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
      <PlayerForm addPlayer={addPlayer} />
    </div>
  );
};

export default PlayerList;

Now I would like to be able to delete any given player after adding them to the Table . I'm not sure how to proceed beyond building a function

const removePlayer =() =>{
}

Please could someone help me with this?

Answer 1

first, you have to send the player id to the function then filter out that player

const removePlayer = (playerId) => {
  setPlayer(player.filter(p => p.id !== playerId));
}