How to Remove an Element in React JS || Delete element from list in React JS

hey everyone welcome to cody youtube channel in this video we will talk about and we will create a program for how to remove an element from react list you have a next list of elements you would like to remove or delete one of them so how to do this let's learn it import react and here i will just write my function to do list i will create a list okay i'll create our an array first of all then i will create objects here first object id and i will give the name for example hp and also i will just copy it and the name will be deal and also the id that's okay so i have this list so let's show it first of all yeah i have i will create a list here and also now i will use the map function the map function just we will show this list using map function curly braces and let's start map and here i will take a function we will use array function arrow function our option here will i will pass an element to it for example to do an arrow function and here what we will do so now we'll create a list i will return a list i will create a list and i will assign the key to this together to the list the key will be should be unique so i will just first to do that id that is unique with us and also here i will pass i will write the collaborating curl braces because it is a dynamic dynamic value dot name i will just print the name here so and that's why i will export this export default to do list i've exported it and also i imported this here okay i imported it here in index page so now let's run the server and then start yeah see guys we have this list these two elements let's be ended so now what should we do first of all we need to use the use state hook because we would like to change the state so i will use the use state hook here react dot use state okay i will use it and also here the first one will be the name and the second one b to the function where we would like to change the state okay we will call this to change the state update to update the state and it is the name of this list so we should import it new state yeah so now let's first whenever we click on this element okay winning click in every one of these so that should remove from the list okay or also we can draw and a next sign here just i will draw an x sign here yes and that's why we style it and the margin lift will be the lift will be 10 pixel and also the color will be read yeah so whenever we click on this sign you see this okay when we click on this side so that that element should be moving now so the cursor cursor will be fine yeah so now i will use the on click event okay and click event whenever we click on this explain around this um x sign so that should remove and click i think here i will call a function for example um remove list okay remove list i will create this function i will keep it here function list okay now here i will pass the id of this uh to do on which element weekly we will pass the id of that so here i will use the arrow function to call this function and i will pass here the id to do dot id here so here i will just get the id here the id will come here yeah now i will use the filter function look at new list is equal to here i will use on this list the filter function okay and this list less dot filter yeah the filter function will filter all the items not the one here you will specify that for example here i will list l okay i will use the arrow function l dot id not equal to equal to id the one whose id was equal to in the list for example that the filter will filter all the elements whenever the number reads to the one we pass the id it will not filter that one and it will not assign that one to the new list okay we have created new list so now we will update our state okay update our status to state to update that we will use this function sheet list okay now i will pass the new list here i first here yeah it has updated now so now let's see what happened okay let's see it and come here yeah whenever we click on this okay he saw that the first one has removed and also the second one so it was to remove an element from a list in react series very simple just in a few lines of code if you liked the video please subscribe to our youtube channel for more and more videos related to reactive thanks for watching

Channel: Code With Yousaf

Views: 12,648

Keywords: delete an item from list in react js, react js remove from list, remove from list in react js, react js delete, remove in react js, how to remove an element in react js, how to delete an element in react js, react js crud operation, crud operation in react js

Id: 0MknQjxiJZ0

Length: 5min 23sec (323 seconds)

Published: Sat Aug 20 2022