Delete currently clicked item in react-CodePudding

Thanks for the help in advance. Currently, I am learning react. As a part of it I am coding a project with a basic listing and deleting the currently clicked listed item. I was able to list the entered item but was not able to delete it. I was able to fetch the id of the currently clicked item but doesn't have a picture of what to do next.Can anyone please help me to solve this. My code:

App.js

import React, { useState, Fragment } from "react";
import UserAddForm from "./UserAddForm/UserAddForm";
import UserList from "./UserList/UserList";
const App = () => {
  const [dataList, setDataList] = useState([]);
  const FormDatas = (datas) => {
    setDataList([datas, ...dataList]);
  };
  const deleteListItem = (clickedListId) => {
    console.log(clickedListId);
  };

  return (
    <Fragment>
      <UserAddForm enteredFormVals={FormDatas} />
      <UserList listDatas={dataList} deleteItem={deleteListItem} />
    </Fragment>
  );
};
export default App;

UserList.js

import React from "react";
import userListing from "./UserList.module.css";

const UserList = (props) => {
  const deleteHandler = (e) => {
    console.log(e.target.id);
    props.deleteItem(e.target.id);
  };
  return (
    <div className={`${userListing.users} ${userListing.whiteBg}`}>
      <ul>
        {props.listDatas.map((data) => (
          <li key={data.id} id={data.id} onClick={deleteHandler}>
            {data.name}
            {data.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

UserAddForm.js

import React, { useState } from "react";
import UserForm from "./UserAddForm.module.css";

const UserAddForm = (props) => {
  const [enteredName, setEnteredName] = useState("");
  const [enteredAge, setEnteredAge] = useState("");

  const nameHandler = (e) => {
    setEnteredName(e.target.value);
  };
  const ageHandler = (e) => {
    setEnteredAge(e.target.value);
  };
  const userFormHandler = (e) => {
    e.preventDefault();
    const EnteredFormDatas = {
      name: enteredName,
      age: enteredAge,
      id: Math.random().toString(),
    };
    props.enteredFormVals(EnteredFormDatas);
  };

  return (
    <div className={`${UserForm.input} ${UserForm.whiteBg}`}>
      <form onSubmit={userFormHandler}>
        <label htmlFor="username">Username</label>
        <input
          id="username"
          type="text"
          onChange={nameHandler}
          value={enteredName}
        />
        <label htmlFor="age">Age (Years)</label>
        <input
          id="age"
          type="number"
          onChange={ageHandler}
          value={enteredAge}
        />
        <button type="submit" className={UserForm.button}>
          Add User
        </button>
      </form>
    </div>
  );
};

export default UserAddForm;

CodePudding user response：

You need to filter out the item from the array by keeping ones with a different id and set it back as a new dataList.

  const deleteListItem = (clickedListId) => {
    setDataList(items => items.filter(({ id }) => id !== clickedListId))
  };