Scribd
Upload
6 views1 page

React User List with Deletion Feature

This document is a React component that displays a list of users with their first name, last name, and age. It allows users to delete an entry from the list by clicking a button, which updates the state accordingly. The initial user data is hardcoded into the component as an array of objects.

Uploaded by

KundiLokesh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views1 page

React User List with Deletion Feature

This document is a React component that displays a list of users with their first name, last name, and age. It allows users to delete an entry from the list by clicking a button, which updates the state accordingly. The initial user data is hardcoded into the component as an array of objects.

Uploaded by

KundiLokesh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import React, { useState } from "react";

const Index = () => {


const intialArray = [
{
id: "sdhaffsdkfjas",
firstName: "emma",
lastName: "watson",
age: 27,
},
{
id: "ksafewyiasere",
firstName: "srikanth",
lastName: "racharla",
age: 24,
},
{
id: "35232fsf",
firstName: "don",
lastName: "seenu",
age: 24,
},
];
const [data, setData] = useState(intialArray);
[Link](data);

const handleDelete = (comingId) => {


const filterData = [Link]((eachItem) => {
return [Link] !== comingId;
});
setData(filterData);
};

return (
<div>
<ul>
{[Link]((eachItem, index) => {
const { firstName, lastName, age, id } = eachItem;
return (
<li key={index}>
<div>
my firstName <strong>{firstName}</strong>
</div>
<div>
my lastName <strong> {lastName}</strong>
</div>
<div>
my age <strong>{age}</strong>
</div>
<button onClick={() => handleDelete(id)}>delete me</button>
</li>
);
})}
</ul>
</div>
);
};

export default Index;

You might also like