React lists and keys tutorial | update delete list elements using unique key
Вставка
- Опубліковано 9 лют 2025
- React JS, Create, Update and Delete elements of the List using unique keys.
Article and code samples from this tutorial
*github.com/tec...
Please be my patreons on patreaon
/ techsith
Follow me for technology updates
/ techsith
/ techsith1
Help me translate this video.
www.youtube.com...
Note: use translate.goog... to translate this video to your language. Let me know once you do that so i can give you credit. Thank you in advance.
Three cool fresh things for me here:
1) passing all props with {...props},
2) making copies with Object.assign(),
3) the 'react-html-id' package.
Awesome video!
Thanks for summarizing for us. :)
Hi Techshith, Thank you so much for all your videos on react js css and redux. I have gone through most of them. You made my life easy. I was totally newer to UI. U have explained everything with simple examples. Your single 20 mins video is equivalent to browsing different sites for correct clarification.
Thanks a lot.
thank you. i got stucked with this over 2 weeks until i found your video. Great explanation!
Thanks for watching Michael!
Thanks man. I created a list component and i had difficulties when i had to delete items. It's so simple. Cheers
Great, I am slowly starting to get a feel for React. Cheers Coach! U rock.
Line: 19 Quick Tip
-----------------------------
this.setState( {users: users} );
can also be written simply as,
this.setState( {users} );
Vignesh, I see you are working hard at learning react. Keep it up.
@@Techsithtube Thanks very much, your video series been a great help. Making these courses are not easy, and I really appreciate you doing this!
I know techsith is keeping it simple but a nice little FYI is you can do all of the code he did inside the render (inside the ul tags) in the return instead. So instead of putting the Child component in the render you can put it above that and inside the return using (excuse the pseudo code)
const list = state.map...;
Then inside the render:
{list}
Just a tip because once you start adding a lot inside the render it can became very messy and hard to maintain. This keeps the render more "html" like.
Great video techsith! I enjoyed learning about your approach to Object.assign for getting around an immutable state.
yes that is a good point. looks much cleaner this way.
As for the Object.assign() you can also use spread operator to create a copy. [...this.state.users] but i like Object.assign for its readability
I am going to mess with Object.assign today to get the hang of it, I really like that. That is a very straightforward way of handling state. State can be such a pain in the beginning for people that don't understand how references work.
Object.assign was the part I needed. Thanks
You're the man! Thanks for the great video!
Glad to help! Thanks for watching!
Good job. Because of these videos like this frontend (and React in particular) will be more understandable. Thank you!
Good work.. 2 new things for me
1) passing all props with {...props},
2) making copies with Object.assign(),
Thank you so much, that was the best video I saw on the topic!
I learnt a lot to be honest.
thanks very much
Capitalize that User component you bad boi you!!!
Great tut thank you!!
besides that Object.assign method you used to create a copy of the users array, would this be a valid alternative: const users = [ ...this.state.users ]; ?
yes I actually prefer the spread operator in this case ,
Great video with lot of content, nice explanations !
Thank you Vishwa :)
short and sweet!
thanks buddy you solved my prblm
nice explained tutorials!Is it necessary to use constructor and then the state inside the constructor?
Thank you so much sir.... Need help from 16:00 to 19:00 please explain this 😊😊😊
You can use this too
updateName(index, event){
const users = Object.assign([], this.state.users);
users[index].name = event.target.value;
this.setState({users: users});
}
@@karanmidha8709
var newList=[...list];
newList[index].name=event.target.value;
setTile(newList);
This works perfectly fine too
I have a question @techsith. When you created the unique id while deleting. Is it not necessary to pass that that id to the delete function? I see that u are still deleting it by passing the index and not id
Eagerly waiting for redux
Deepshikha, I am almost there. I need to cover few more topics before moving to redux. Thanks for watching!
techsith thanks a lot ...also waiting for ur udemy course
+1 for redux
like to watch next next videos. Thank you so much
Great video, it had helped me a lot.
Thank you, this helped me.
very nice videos
Prof loves to give homework 😀
Thanks for this. Good series.
Awesome tutorial for React Sir, but here I would like to say that I am beginner in React and you mentioned in your tutorial that we should follow functional component but you used old pattern. So I am facing good enough challenge to run this code. So please suggest me
thank you very much. I will follow to the end. Question: How do i set to delete id key of the particular list item than deleting the first item
At the moment from your code if I click any button the first array item will be deleted and not this id of button clicked
This is exactly what happens. If you look in the video, in his example he only tries to delete the first item as well.
Thanks a lot sir for ur efforts..
thank you so much sir
Hi Sir I am not able to use UniqueId.enableUniqueIds(this) in functional component as find in functional their is no constructor instead of that we have to use useState Hook but I didn't find way to use it
I think no need to pass id in update method and then extract index out of it as we can also pass index like the way we done with delete method..it will save form extra processing cycles.. however if this variation is for learning purpose all well..
Great video soooooo helpful ty techsith!!!
I really love you man :) thanks
agree with you
really...
nice tutorial
"I'll provide a link here" is your signature statement.. Just like that idea of empathizing with us. Btw, could you plz elaborate on why should'nt we put index as the key in array map. might b a stupid silly doubt..but still..plz
let's say you have some elements with an automatic index of 0,1,2,3,4 adding and removing elements would change the index of the elements. removing 3 would make 4 now new 3. which is hard to track. that is way react requires key which needs to be unique to each element.
Thank u . Is webpack, grunt , gulp part of webseries ? Can you also, please make video on dev/prod configuration for webpack for commercial applications ?
I encountered an issue trying to use the react-html-id module. Bizarre. It seems simple enough to use npm to load in a new module, restart the react process, etc. but then this weird rabbit hole opened up...
Could not find a declaration file for module 'react-html-id'. '/Users/claine/Projects/react-demo/node_modules/react-html-id/index.js' implicitly has an 'any' type.
Try `npm install @types/react-html-id` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-html-id';`
Are you using typescript with react?
@@Techsithtube did you find a solution to this problem? I'm having this same issue and can't figure out how to fix this.
const users=Object.assign( [ ], this.state.users);
users[i].name = ev.target.value ; //i is the index from the map used in
this.setState( {users} )
Is there something wrong if i update the name like this?
(i tried this and things are fine,but i still want to know )
It should be fine as you created a copy of the state. and you are modifying primitive value.
this.nextUniqueID() is not working, it says "Property 'nextUniqueId' does not exist on type
This guy is God for me!! _/\_ (respect sir!!)
Thank you for this video, it was extremely helpful and informative. How might you have written it so you could modify the age as well as the name without repeating code? I'm sorry if this is obvious, I am new to both coding and React.
Alex, if you follow the playlist where next few tutorials i show how to modify age as well as name. ua-cam.com/play/PL7pEw9n3GkoVPFsAylfniAT3QQcjWGl5C.html
What if I have saparate module file with array of objects with info. And I want to add something there like new object with info from input, or remove. So, I just use import to my component, but I can't change my module array, format is .js not json, but I can't do nothing with array from react =(
What I should do?
do you think you could explain how to make the add function?
Thanks!
Nice tutorial. Just an aside that Object.assign is a shallow copy.
why do you have to use Object.assign, when you may use {...this.state.users} ?
You can use either. Spread operator looks better. :)
We can also pass index directly instead of user.id while performing changeUserName
Getting issue while react-dom.development.js:23275 Uncaught TypeError: react_html_id__WEBPACK_IMPORTED_MODULE_4___default.a.nextUniqueId is not a function
Thanks for the videos. Could you consider creating a tutorial for Git anytime soon?
Sure .. give me a couple of weeks. Do you want git from beginners kind of video?
Starting from the start would be great! Thanks in advance.!
Ok will make a video accordingly. Do subscribe and activate notification so you will be notified when the video is released.
Already did!
while importing modules/ components when do we need to use curly braces ?
It depends on how the module is written. I have a brief video on js module, this might give you more understanding. ua-cam.com/video/HqIkddLfCAk/v-deo.html
thanks :)
Sir thanks for your support. But i have a question that-
Can i use deleteUser function on user.js file?
can you explain bit more detail about your question?
@@Techsithtube sir can i use any function on children file?
thank you!!
Why are are creating copy always why we can't mutate the state ?
Hey @techsith ,when do we install globally(-g) and when do we just install the package?
create-react-app helps you create projects so it needs to be install globally. react-dom is used inside a project so we need to install in the package. got it.
onChange() method is each and every time trigging ...How to handle it i have one input value example:
When i execute at the same point than 5' 12'' of the video, i got the next error: "Text string must be rendered within a component." . Somebody can tell me how to solve it?
I'm in React Native
bro for every event you are using e in the parenthesis . what is the use of e ??? kindly respond plzzzzz
e that i am passing in parenthesis is actually the element that i clicked on . As you can see i dont have to pass it , its automatically available in the handle. So you can identify and access the dom element that you click on.
React-html-id package causing issues. Asking couldn’t find the declaration file for module. Could any one help on this one!
Maybe you have a wrong version of the package. find the right version for your react version and re-install the package.
Nice explaination, But pls let me know how i stop the npm to install other package. FYI I'm using windows
What do mean by stopping install other packages
Thank you!! for your prompt response...
I meant that as i've started the npm through 'npm start' command and its running fine. Now I want to install 'react-html-id' package without closing the command Prompt. So how should i install it? because there is cursor only blink,not able to write a command like npm install react-html-id. Thats why i'm asking how i stop the npm to install the other package.
you can open another console and do npm install react-html-id --save
yup!! it was the solution which i was already doing.. but today i got my answer. we need to do here CTRL+C BTW thank you very much for your response...
Hi,
i don't know whether it's good place to ask, but whenever we go for an interview, company needs everything, if you are going for web developer interview they need HTMl, css, js, ajax, php, mongo, ...blah...blah..what i need to learn if i want to be react and react native developer .
Minimum for React/React Native
- ES6 JavaSCript ( Arrow Functions, Spread Operator, Classes, ES6 Modules, Map function, Reducer, Promise, Async/await )
- HTML, CSS3 - Flex Box, ( Display, Position, Zindex properties)
when I do some modification my compiler doesn't compile automatically, Every time I need run same in terminal npm start, I am using ubuntu. What can I do
are you using create-react-app?
Yes
I follow all step what are you given in first video
how to update a single item in flatlist without re-rendering all flatlist items
At 2:48 why cant we use forEach
react suggest to use map instead of for each becase, map is designed to map each element of the array with something else that you want. forEach you have to provide that logic.
Wish this was done in hooks. I find it hard to refactor class to functional.
this has not changed with hooks. You can look at my hooks playlist for newer videos
Thank you..
sir please tell me the why we have used constructor heree.elaborat
In react you can use constructor or not . its a personal choice. In other videos i don't.
Thank u sirr..fromm indiaa
in user component why not used this keyword can u please explain
use component is a function component so there is not this. Only class component you have to use "this" keyword
@@Techsithtube thanQ
woohoo convoluted js... listen, I love this language, but jesus sometimes it takes the most confusing lines of code for the simplest results. It's starting to feel like React is just a hack around, and with hooks it's starting to feel even more like that.
Great video etc, etc, I learned something. But idk, this seems quirky. Can't see a better way tho...
How about this?
const users = [...this.state.users];
That would also work.
please also tell how to update redux with this
IF you follow the entire series on react I cover redux . you can find the series in my playliest.
he is literally reading off from another screen
Chan please makes a Video refs
the mere fact that React doesn't provide unique ID for its components its baffling me!
It's for list only. Do you know if any other frameworks provide unique id?
I know Angular doesn't ask you to provide any unique id when looping with ng-for. That's why i think react should handle it for you instead of finding your own way through external libraries.
What happens if you want to render multiple in .map() function? You have to provide unique Id for all rendered elements, but iterator is the same for every loop...
This is not for beginners level....
thank you
tanks a lot