Rendering a List of Components in React

  Рет қаралды 5,427

Sam Meech-Ward

Sam Meech-Ward

Күн бұрын

Using map to create a list of components super common in React. You need to know how to use map correctly, and this video will show you how
This is video #4 in my react series:
#3 React Props Explained: • React Props are Easy
#5 Event Listeners in React: • This Is How You Handle...
Join this channel to get access to perks:
/ @sammeechward
Chapters:
0:00​ Intro
0:20 App Setup
1:20 The wrong way
1:35 Array of Components
2:40 For Loop
3:45 Key
5:35 Map
7:12 Filter
7:41 Summary
beta.reactjs.org/learn/render...
🔗Moar Links
My Website: www.sammeechward.com
Instagram: / meech_ward
Twitter: / meech_ward
Github: github.com/orgs/Sam-Meech-Ward

Пікірлер: 16
@HarisSohail-zo5mh
@HarisSohail-zo5mh Ай бұрын
You taught this concept in 8 mins that my teacher couldn't do in 90 mins. Cheers
@Pareshbpatel
@Pareshbpatel 11 ай бұрын
So many key React concepts explained along the way. Thanks, Sam PS You have a great teaching style. {2023-06-07}
@avertry9529
@avertry9529 Жыл бұрын
Last week I found out why we shouldn't use the index as key. for example if index 0 is deleted, all the keys change their value as the index shifts(1 becomes 0, 2 becomes 1, etc.) Then ALL are re-rendered instead of just the updated or deleted one. The reason your code works without a key, is React will use the index itself, with a warning. I find it really useful to know why things work or don't work, and it helps in memorisation.
@shinobi1975
@shinobi1975 Жыл бұрын
May I know where you find this?
@avertry9529
@avertry9529 Жыл бұрын
@@shinobi1975 Cannot remember sorry.
@samsorge27
@samsorge27 Жыл бұрын
Great Tutorial,so happy I found your channel
@mrholmes1266
@mrholmes1266 Жыл бұрын
Great videos mate learning alot from you!
@SamMeechWard
@SamMeechWard Жыл бұрын
Thank you
@alexandergeorgesquire220
@alexandergeorgesquire220 4 ай бұрын
Very nice thanks Sam
@jellyjollyjelly9513
@jellyjollyjelly9513 4 ай бұрын
You deserve more fame
@siavoshoon
@siavoshoon Жыл бұрын
Greate job, same as always👍
@alhamdulilah6892
@alhamdulilah6892 Жыл бұрын
Thanks!
@fromagetriste
@fromagetriste 5 ай бұрын
great video
@mistercakes
@mistercakes Жыл бұрын
good video. i understand that there should be uniqueness to the elements in the json array, but it's not very clear to me why there isn't an error when you create the joke component dynamically, as it looks like it only accepts joke and rating as arguments. i'm guessing it's something in vanilla javascript with how a function accepts arguments, but it's not very intuitive.
@user-rh5bd7ss3t
@user-rh5bd7ss3t 10 ай бұрын
what if i am render a table instead of the joke component for me its getting page unresponsive if i render 30 tables inside that different rows and columns
@Cooper_246
@Cooper_246 2 ай бұрын
How did you make the like button glow like that, when you said to press it? Never seen that before, cool.
This Is How You Handle Events In A React App
9:15
Sam Meech-Ward
Рет қаралды 4 М.
React Hooks: useState
21:13
Sam Meech-Ward
Рет қаралды 3,1 М.
🍟Best French Fries Homemade #cooking #shorts
00:42
BANKII
Рет қаралды 56 МЛН
The Worlds Most Powerfull Batteries !
00:48
Woody & Kleiny
Рет қаралды 27 МЛН
Каха инструкция по шашлыку
01:00
К-Media
Рет қаралды 7 МЛН
Can you beat this impossible game?
00:13
LOL
Рет қаралды 69 МЛН
How to render LISTS in React 📃
26:40
Bro Code
Рет қаралды 22 М.
Learn React #5: Maps and Loops in JSX
13:56
Anthony Sistilli
Рет қаралды 54 М.
React Props are Easy
18:05
Sam Meech-Ward
Рет қаралды 7 М.
Conditional Rendering Components in React
13:10
Sam Meech-Ward
Рет қаралды 6 М.
React Hooks: useEffect - Everything You Need To Know
43:23
Sam Meech-Ward
Рет қаралды 3,7 М.
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 452 М.
Every React Concept Explained in 12 Minutes
11:53
Code Bootcamp
Рет қаралды 391 М.
This is the Only Right Way to Write React clean-code - SOLID
18:23
How Long it Takes to Actually Learn How to Code
8:31
Kenny Gunderman
Рет қаралды 31 М.
This is why you need the key property in React
5:44
Web Dev Cody
Рет қаралды 16 М.
5 НЕЛЕГАЛЬНЫХ гаджетов, за которые вас посадят
0:59
Кибер Андерсон
Рет қаралды 1,5 МЛН
Задача APPLE сделать iPHONE НЕРЕМОНТОПРИГОДНЫМ
0:57
Самый топовый ПК без RGB подсветки
1:00
CompShop Shorts
Рет қаралды 218 М.