Rendering a List of Components in React

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

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 2 ай бұрын
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.
@jellyjollyjelly9513
@jellyjollyjelly9513 5 ай бұрын
You deserve more fame
@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
@siavoshoon
@siavoshoon Жыл бұрын
Greate job, same as always👍
@fromagetriste
@fromagetriste 5 ай бұрын
great video
@alhamdulilah6892
@alhamdulilah6892 Жыл бұрын
Thanks!
@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 3 ай бұрын
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,1 М.
React Hooks: useState
21:13
Sam Meech-Ward
Рет қаралды 3,2 М.
ROCK PAPER SCISSOR! (55 MLN SUBS!) feat @PANDAGIRLOFFICIAL #shorts
00:31
⬅️🤔➡️
00:31
Celine Dept
Рет қаралды 47 МЛН
Always be more smart #shorts
00:32
Jin and Hattie
Рет қаралды 31 МЛН
Conditional Rendering Components in React
13:10
Sam Meech-Ward
Рет қаралды 6 М.
How to render LISTS in React 📃
26:40
Bro Code
Рет қаралды 23 М.
Learn React #5: Maps and Loops in JSX
13:56
Anthony Sistilli
Рет қаралды 54 М.
React Props are Easy
18:05
Sam Meech-Ward
Рет қаралды 7 М.
Fetching and Posting Data in React
29:03
Sam Meech-Ward
Рет қаралды 4 М.
Why Signals Are Better Than React Hooks
16:30
Web Dev Simplified
Рет қаралды 456 М.
8 TypeScript Tips To Expand Your Mind (and improve your code)
10:54
React Hooks: useEffect - Everything You Need To Know
43:23
Sam Meech-Ward
Рет қаралды 3,8 М.
This is the Only Right Way to Write React clean-code - SOLID
18:23
Телефон в воде 🤯
0:28
FATA MORGANA
Рет қаралды 1,2 МЛН
Ждёшь обновление IOS 18? #ios #ios18 #айоэс #apple #iphone #айфон
0:57
Обзор Sonos Ace - лучше б не выпускали...
16:33
💅🏻Айфон vs Андроид🤮
0:20
Бутылочка
Рет қаралды 710 М.
APPLE совершила РЕВОЛЮЦИЮ!
0:39
ÉЖИ АКСЁНОВ
Рет қаралды 3,8 МЛН