React Hooks Tutorial – 5 – useState with array
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703516725_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Hooks Tutorial – 5 – useState with array
Alright guys in this video we are going to take a look at a simple example to understand how to use the state hook when the state variable is an array I’m going to start off by creating a new file called hook counter for dot J s
Within the file I’m going to use the snippet RFC II to create a functional component next we are going to declare a state variable using the use state hook so import you state and then the structure items and set items from you state and since we are working with
Arrays for this example the default value is an empty array next let’s render the items in the JSX need to add a UL tag and then we are going to items dot map we’re going to get each item and then render a list item the key is going
To be item dot ID and we render item dot value so we are dealing with an array of objects and we don’t really have any items to begin with so let me also add a button at the top which pushes new items into the array button the text is add a number
And on click we are going to call a function add item now let’s define the add item function Const add item is equal to an arrow function and within the function we call the set items setter function so set items now we need to pass in the value to set for the
Items array and we learned in the last video that the setter function doesn’t merge and update or in the case of an array the setter function doesn’t automatically append the item to the end of the list we need to handle that manually using the spread operator which
Is pretty simple as we saw in the last video so the argument to set items will be an array and first we spread the items array and then we push a new object for the new object the ID is going to be items dot length and the
Value is going to be a random number between 1 and 10 so value math dot lor math dot random times 10 plus 1 so basically a random number between 1 and 10 now let me explain what is happening here whenever add item is called we make
A copy of all the items in the array using the spread operator to that list of copied items we simply append another object that way we are not overwriting the original array on first iteration items is an empty array so ID will be 0 which is items dot length the value will
Be a random number between 1 and 10 on the next iteration we would have one item in the items array so we make a copy of that and to that we append a new object the ID this time will be items dot length which is equal to 1 and the
Value of course will be a and the same logic continues for subsequent button clicks let’s save this and include it in AB Dodgers hook counter for if we now go back to the browser and click on the button you can see that new items are added to the
State variable so a pretty simple example but what I wanted to show is how you work with you state and erase make a copy using the spread operator append the new item and pass it as argument to the setter function alright with that we come to the end of the different details
We had to learn about the you state hook let me quickly summarize what we have learned so far the you state hook lets you add state to functional components by calling you state inside a functional component you are creating a single piece of state in classes the state is
Always an object you can store properties on that object with the use state hook the state doesn’t have to be an object it can be an array a number a boolean a string etc the you state hook returns an array with two elements the first element is the current value of
The state and the second element is a state setter function you call the set of function with a new value to set the state which will in turn cause the component to rerender in case your new state value depends on the previous state value you can pass a function to
The setter function the setup function will receive the previous state as its argument finally when dealing with objects or arrays always make sure to spread your state variable and then call the setter function to get the expected behavior alright that is the summary of the state hook make sure to keep these
Points in mind and I’ll see you guys in the next video where I’ll introduce you all to another important hope
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
but you did not use return keyword in your map function
Where can I access the ppts?
How to add items of array to existing array state object
This channel is severely underrated. Your examples are the most practical ones here among other YouTube content creators. These are the kind of examples we want to see because these really simulate real life situations.
Hi!
Can someone tell me how to use useState with an object with an array attribute??
Why we are pushing an object in line no. 7
Please any can know about it let me know….
Excelente ! Muito Bem Explicado ! ! Parabéns pelos vídeos ! ! !
A less complex way to do this is to use concat method: example below
You can rewrite your addItem method as thus;
const addItem=()=>{
setItems(items.concat({
id: items.length,
value: Math.floor(Math.random() * 10) + 1
}))
}
Done thanks
Summary 4:30
You can use objects with useState but remember to update the existing state object and not overwrite it, you can update it by using the spread operator notation or using the previous value version of useState and updating the object (preferred way)
Thank you vishwas
My question is that after you append new data to the useState array the component should re-render, In case I have enough number of elements in the array to make it scroll then if i add one more to the useState array then will it re-render and the scroller moves to the top? In both the cases I want to know the reason
thank you so much sir
Do not miss the summary !!
So you don't have to use the prevState setter function when you're spreading the object/array first? Am I right to think that spreading the state also gives the previous state and that's why you don't need it?
why dont we use previous state in this case while updating the array
1. setStateVar – will always gets its variable's type brackets.
setName( { } ), setItems( [ ]).
2. if array of items – always – map+arrow function Item + key
3. this video example is array of objects – id (obviously for keys), value – big note:
Thank you very much for these excellent tutorials!
huge thanks for creating this content.. its really helpful 👍 i just figured out something because of YOUR EXISTENCE
👍 great .
dude you are amazing, I was so frustrated until I found this video. Thank you so much
I don't understand English very good, but i understood this video, thanks for helping me😀😀
Thank You, Your Video Is Very Helpful.
thanks
Very good explanation again. Keep up the good work boss.
And if you want to delete an item ?
Why not simply use "push" ?
thank, that helped me a lot !
Great series
Can we use the push method for append instead of spread op?