Warning: Each child in a list should have a unique key prop SOLVED in react js
Warning: Each child in a list should have a unique key prop SOLVED in react js
How to solve Warning: Each child in a list should have a unique “key” prop in react js is shown
Content
0.32 -> hey hello everyone in this video i will be
showing you how to solve warning each child in
4.72 -> a list should have a unique key prop in react.js
and even though i'm getting my output perfectly
9.84 -> i'm still getting this warning in my console so
i'll be showing you two ways how you can solve
13.84 -> this problem and i will also be explaining you
why you are getting this problem over here so
18.56 -> let's get started so first let me explain my code
okay so i will just go to visual studio code and
23.28 -> this is my like a really really simple piece
of code i'm having over here this is my array
27.92 -> and it does like each item has a key which
is text and a value this one react is fun to
33.28 -> learn so that's getting displayed over here and
this is my map function which basically iterates
39.36 -> through my entire array with help of this val
so this val basically corresponds to each item
43.92 -> present in my array and i'm having a div and h1
tag and this val dot text is this this is the key
49.84 -> and it's just displaying my text so that's why
it's appearing bold because of the h1 tag and i
55.28 -> have like a center okay that's why it's appearing
in the center of this page okay so now let's find
61.28 -> out what is causing this error okay so this is
the reason why we are getting the error okay so
66.24 -> just read it out rows in js array should have a
unique key property and it helps react.js to find
72.72 -> references to the appropriate dom and update only
content inside them and not re render the entire
78.32 -> table or row okay so it basically tells us that
every array okay every array item that is each
84.48 -> individual item should have a unique key which we
aren't having over here because this unique item
90.08 -> or a key helps react to identify which particular
value in an array or a div tag or a component is
96 -> getting changed so this helps react to update or
modify only that particular component instead of
101.52 -> updating or rendering the whole whole context okay
so that's the main thing if you want you can just
106.56 -> pause it and read it out okay so this is the
reason why we are getting this error we haven't
110.8 -> passed that unique id or a key the first method of
solving this problem is you need to just go here
116.88 -> inside this particular val reference that you're
having for iterating through each item in the list
122.16 -> you're just going to put a comma you're just
going to put i or any other name uh it's up to
126.88 -> your choice and inside the returning tag so here
i am returning div tag that is this is the main
131.36 -> parent tag and this h1 is a child tag okay so what
you're doing is inside this div tag you're just
136.96 -> going to put key equal to within curly bracket
we're just going to put i this i corresponds to
142.72 -> this text so if you are putting index or any
other variable name we're just going to have
146.48 -> the same name over here as well so now if i just
save it i'm not getting any error and if i just go
152.96 -> here and refresh it boom my warning has vanished
now so this is now working perfectly all right
158.24 -> so now what the what it basically does because
this key is the unique id that we were referencing
163.44 -> over here this key equal to i is the unique id
that react wants to have in an array okay so
169.12 -> if you want i can just also display the value as
well so i'm going here just put a plus some space
175.76 -> plus and i so this plus operator just concatenates
the string okay so if i now just save it
182 -> and now i go to the output i'll be getting 0
1 2 3 4 so this number directly corresponds
188.16 -> to that index number of each item in my array
okay so that is going to be unique because each
193.12 -> item is going to have a unique uh index number
okay because we basically can't have same index
198.16 -> number for every item so it's going to be 0 1
2 3 4 that is going to be obviously unique okay
204.88 -> and another way that is the second way of solving
this problem is by manually having unique id
209.84 -> in each array item itself so let's example uh so
for example i will just go here and i'll put id
218.8 -> colon i will put one comma okay so what i will
do is i'm just assigning a id to each item in
224.8 -> my array okay so just paste it and i will put
two and go here i'll put three come over here
252.96 -> that's a thing we aren't getting
any error over here and fine
256.56 -> and instead of this i just remove this i okay
and here in the key what you will be giving is
262.88 -> val dot id that's it okay we'll
just remove all this stuff so
269.52 -> now instead of giving index as the unique id
we are having our own id over here but the
273.84 -> fact is that you need to give this id unique
because if you give this id one here and for
278.64 -> the second item as well if you give one as the
id it will obviously throw you an error this id
283.44 -> for each item in an array should be unique so now
i don't have that i over here i'm just passing my
290.16 -> id for each item in an array as a unique id or
a value over here that's it if i now save it
297.92 -> and as you can see here refresh it i'm not getting
anywhere over here so really simple uh i've shown
303.36 -> you two ways one is by using this comma i and key
equal to i and other another one is like having
308.24 -> unique id for each item in an array itself so i
hope you would have found this video useful i have
312.28 -> also done many other videos in c c plus plus java
python sql queries as well as 3d animation using
317.12 -> blender so do check out videos of my channel
subscribe and support me thanks for watching
Source: https://www.youtube.com/watch?v=d5bUtSJR_YI