Тёмный

Render different component on click without react router - React 

h3webdev
Подписаться 3,5 тыс.
Просмотров 70 тыс.
50% 1

Udemy Courses:
- 9 React Projects on Udemy - bit.ly/2D83M8c
- 9 React Projects on Gumroad - h3webdevtuts.g...
Social Media:
- Web Dev Discord - / discord
- Github - github.com/h3h394
- Twitter - / h3webdeveloper
- Instagram - / h3webdevtuts

Опубликовано:

 

21 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 110   
@LWolf94
@LWolf94 2 года назад
You are such a life saver! I spent hours trying to come up with a way to do it and I just couldn't get it to work. Also, as a beginner React developer, thank you for going step by step. It made it so much easier to follow. Thank you!
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you, much appreciated :)
@pritamraha4369
@pritamraha4369 Месяц назад
even after 4 years, in the 2024, this video is project-saver for me 😍
@michelpinto4165
@michelpinto4165 3 года назад
THANK YOU SO MUCH 😭 I've spent so much on this and it was this simple, thanks a lot!
@h3webdevtuts
@h3webdevtuts 3 года назад
Glad you found it usefull. Thank you so much :)
@abdulhannan-lg6kb
@abdulhannan-lg6kb 2 года назад
hours of hard work and all it needed was a random russian guy
@gwenthedoll3677
@gwenthedoll3677 2 года назад
They really do seem to show up at the most random times, but always with a solid solution explained in a very casual "yeah you can just do it like this" kinda way. I love it.
@h3webdevtuts
@h3webdevtuts 2 года назад
I'm not Russian, but I appreciate the kind words. Thanks for watching :)
@h3webdevtuts
@h3webdevtuts 2 года назад
@@gwenthedoll3677 Thank you :)
@beknurabdurashit2830
@beknurabdurashit2830 2 года назад
haha dude you made my day, I did many tasks with the help of Hindu video tutorials, when I first started programming, I understood videos in English only with a Hindu accent
@robertmasters01
@robertmasters01 3 года назад
I was looking for a react router solution, however i decided to go with this instead lol thanks my man!
@h3webdevtuts
@h3webdevtuts 3 года назад
Glad you found what you needed, I have a router tutorial as well in case you ever wanna use that as well. Thank you :)
@Will-le8yj
@Will-le8yj 2 года назад
bro thank you so much. i use this in a project of mine switching images around and it came out great! I sort of knew it already but didnt know how to around the code correctly! live saver
@ericliss9600
@ericliss9600 Год назад
You made this so easy to understand! Thank you. Worked like a charm on my project.
@blumoon9935
@blumoon9935 3 года назад
Thank you so much. This is great. Your tutorial was very well explained and you went through step by step to the end. Fantastic.
@h3webdevtuts
@h3webdevtuts 3 года назад
Thank you so much :)
@Durood-O-Salam
@Durood-O-Salam Год назад
After searching lot of videos but this helps a lot.
@muhammadibrahimkhan7052
@muhammadibrahimkhan7052 2 года назад
Thanks brother you saved my project. And I really appreciate your efforts 👍👍
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you, much appreciated :)
@akankshashanbhag9247
@akankshashanbhag9247 2 года назад
This helped me with my new assignment, thank you so much! 😭
@h3webdevtuts
@h3webdevtuts 2 года назад
Glad I could help. Thanks for watching :)
@nikeshgupta1241
@nikeshgupta1241 11 месяцев назад
Hey Man its good tutorial for creating tab-bar but for bypass react-router you have to use Window.location.pathname for routing which also change url
@SkyLove512
@SkyLove512 2 года назад
Great Tutorial. Very direct and simple implementation.
@h3webdevtuts
@h3webdevtuts 2 года назад
I'm glad you found it useful. Thank you :)
@marimuthur9456
@marimuthur9456 2 года назад
Extraordinary explanation thank you so much 👌🏼👌🏼👌🏼😊
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@AKSHAT150
@AKSHAT150 2 года назад
First comment on RU-vid ever. Thank you so much for this! Cheers
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@meliarr2012
@meliarr2012 2 года назад
Thanks for explaining this so simply!
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you so much :)
@rafiqjarjous7542
@rafiqjarjous7542 3 года назад
yep! another problem solved by you thank you soo much boss
@h3webdevtuts
@h3webdevtuts 3 года назад
Glad I could help. Thanks for watching :)
@Giggle_Beats
@Giggle_Beats Год назад
Thanks a lot........it was so smooth to get the right way to do it.
@maurillekobri9484
@maurillekobri9484 3 года назад
Really, great job, dear! Now the question is what would you do if you had 100 cards? How would replace the hard-coded index number in the parent? Thanks in advance!
@Shadyholic
@Shadyholic 3 года назад
I think it’s doable with another map in this case inside app.js file, but it depends how your data is stuctured
@h3webdevtuts
@h3webdevtuts 3 года назад
You just need an array of objects, you could pass an id or title there, after that just map over the array and pass the title / id. Hope that helps. Thanks for watching :)
@maurillekobri9484
@maurillekobri9484 2 года назад
@@Shadyholic Thank you!
@maurillekobri9484
@maurillekobri9484 2 года назад
@@h3webdevtuts Thank you! Much appreciated!
@punithgowda1649
@punithgowda1649 3 года назад
God or what ? ❤️🤩
@h3webdevtuts
@h3webdevtuts 3 года назад
Thank you :D
@harsharamayanam7484
@harsharamayanam7484 3 года назад
WOW. You're a lifesaver! Thank you very much!
@h3webdevtuts
@h3webdevtuts 3 года назад
I'm glad you found it helpful. Thanks for watching :)
@BiggieBigM
@BiggieBigM Год назад
great tutorial, is there a way to make it render a component instead ?
@sanjukandagal
@sanjukandagal 2 года назад
Thank you so much. This is what I am looking for. I just wanted to check If I add the back and next button inside card components and it should open the prev and next components. Can you please give me some light on this ? TIA
@h3webdevtuts
@h3webdevtuts 2 года назад
Yeah you can do that, you always know which question is active, so if you are on question 2 lets say u would set active to first one when u click prev and 3rd one when u click next, but having it this way can get messy really fast, I would suggest using index for what you need, hopefully that helps. Thanks for watching :)
@تعليمتساريحشعر
@تعليمتساريحشعر 2 года назад
Thank You very much, I fix my router issues
@h3webdevtuts
@h3webdevtuts 2 года назад
Glad you got it working. Thanks for watching :)
@akashkvarghese7380
@akashkvarghese7380 3 года назад
You saved me bro.... You saved me
@h3webdevtuts
@h3webdevtuts 3 года назад
Thank you :)
@purumohite6874
@purumohite6874 Год назад
Thank you! You made my day 🙂
@rimuru22
@rimuru22 2 года назад
dude.. this helped me a lot, thank you!
@h3webdevtuts
@h3webdevtuts 2 года назад
Glad I could help. Thank you :)
@avishek_ataur
@avishek_ataur 2 года назад
very nice and simple
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@stayInTheGreen_
@stayInTheGreen_ 2 года назад
Genius man
@h3webdevtuts
@h3webdevtuts 2 года назад
Thanks :)
@padukes
@padukes Год назад
Nice tutorial, cheers. To the point
@khoilam7569
@khoilam7569 3 года назад
supper clean easy nice thanks bro
@h3webdevtuts
@h3webdevtuts 3 года назад
Thank you so much :)
@noahsparkes7506
@noahsparkes7506 Год назад
This vid just saved my ass, thank you!
@timzeynalov3537
@timzeynalov3537 2 года назад
thanks but how I can choose initial state ? for example if I need the One to be shown by default
@h3webdevtuts
@h3webdevtuts 2 года назад
Active state is what you want to change to whichever one you wanna display initially. Thanks for watching :)
@naruto_uzumakhi5716
@naruto_uzumakhi5716 Год назад
thanks u save a lot if time
@hilarioobiangobiangmangue8111
@hilarioobiangobiangmangue8111 2 года назад
Thanks a lot!
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@ayoolaoloyede1507
@ayoolaoloyede1507 3 года назад
THANK YOU!💯💯
@h3webdevtuts
@h3webdevtuts 3 года назад
Thank you :)
@silverfox3074
@silverfox3074 Год назад
If we click in the div that is displayed, how can we show another div, with different data inside?
@darshantak5872
@darshantak5872 3 года назад
Lifesaver you are.
@h3webdevtuts
@h3webdevtuts 3 года назад
Glad I could help. Thanks for watching :)
@damianroiz128
@damianroiz128 2 года назад
Thank you for sharing, I followed along and I have some errors, Do you have the repo for this ?
@h3webdevtuts
@h3webdevtuts 2 года назад
I do not have this on github, if you have any issues feel free to join the discord server in description and I'll help you out. Thanks for watching :)
@akhadtop2067
@akhadtop2067 2 года назад
great tuto
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@wassup102
@wassup102 2 года назад
THANK YOU SO MUCH YOU SAVED ME
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@wont8525
@wont8525 3 года назад
If the change button is in the Card components what do I have to do..?
@h3webdevtuts
@h3webdevtuts 3 года назад
I'm not sure what exactly u would like to have and how u wanted to make it work, I would need to see an example in order to help you with that. Feel free to join the discord server and I'll help u out there. Thanks for watching :)
@tundeakinola8122
@tundeakinola8122 Год назад
Pls I have an issue... My buttons are in another component far way. How do I make them control the tabs... Can u do a code for that?? I will really appreciate
@anoop.225
@anoop.225 2 года назад
It really helps, Thank You :) a "active" class loading to all links , how to fix it only for active button/links ?
@h3webdevtuts
@h3webdevtuts 2 года назад
Not sure what do u mean by that, an active class is only for a single element. Right now that's how it works, if you select first one that one becomes active and so on, could you explain further on what you wanna do ? Thanks for watching :)
@adelgafo7412
@adelgafo7412 2 года назад
Thanks bro
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@andreivascul300
@andreivascul300 2 года назад
Amazing
@h3webdevtuts
@h3webdevtuts 2 года назад
Thanks :)
@anoop.225
@anoop.225 2 года назад
It really helps, Thank You :)
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@DiariosD1Dev
@DiariosD1Dev Год назад
Very good, thank you bro!!!
@sasipreethamtanuku2426
@sasipreethamtanuku2426 3 года назад
Thank you soo much .You saved me
@h3webdevtuts
@h3webdevtuts 3 года назад
No worries. Thanks for watching :)
@andibajrami4327
@andibajrami4327 2 года назад
is there any way to add an opacity transition to this
@h3webdevtuts
@h3webdevtuts 2 года назад
Hi, there is no way to add transition on display property. You can make it work with classes instead of toggling display none to block, that way you can add opacity or anything else and transition it, hopefully that helps. Thanks for watching :)
@nikhilbhardwaj6055
@nikhilbhardwaj6055 3 года назад
Like I'm on page number 4, If I do Alt+Left Arrow, would it take me to page number 3?
@h3webdevtuts
@h3webdevtuts 3 года назад
I'm not sure what your concern is, and if that would work or not. Thanks for watching :)
@wwechamp888
@wwechamp888 3 года назад
Really Helpful !
@h3webdevtuts
@h3webdevtuts 3 года назад
Thank you so much :)
@adnanhashem6714
@adnanhashem6714 2 года назад
wow thanks
@h3webdevtuts
@h3webdevtuts 2 года назад
Thank you :)
@kallepallinikitha5159
@kallepallinikitha5159 3 года назад
how to get two cards when we click only on one button
@h3webdevtuts
@h3webdevtuts 3 года назад
Hi, you can add a second object inside first array and that's gonna give you another card. Hope that helps. Thanks for watching :)
@panik_79
@panik_79 Год назад
respect++ dude
@panik_79
@panik_79 Год назад
you just got a new subscriber !
@BabyYoda5555
@BabyYoda5555 3 года назад
This is okay but I cant help feeling like React router is seriously lacking in functionality. There is not a ton of real world use cases for displaying information on top of a different component. I want to be able to change the entire page on button click. React router does not seem to be capable enough to handle this. All the turtorials I have seen just allows you to pull a new component and display it along with the pre existing page components onto a page
@h3webdevtuts
@h3webdevtuts 3 года назад
Hey, I'm not completely sure what ur trying to achieve. React Router is great for changing pages, this example is perfect for something small like this where u wanna change the content of a single component, but u don't wanna navigate to different url or just don't wanna use Router for something small like this in general. Otherwise it would React Router always. Thanks for watching. :)
@amirkian1181
@amirkian1181 2 года назад
too little font ,I couldnt see anything
@h3webdevtuts
@h3webdevtuts 2 года назад
Will make sure to fix that for future videos, thanks for a suggestion.
@ACM4K
@ACM4K 3 года назад
How to do this on android? I mean the syntax
@h3webdevtuts
@h3webdevtuts 3 года назад
Not sure what do you mean by that, can u explain further? Thanks for watching :)
@webtech7242
@webtech7242 Год назад
Its simply tabs
@grigoris56
@grigoris56 9 месяцев назад
Thank you very much!
Далее
Custom Hooks in React (Design Patterns)
12:56
Просмотров 44 тыс.
HA-HA-HA 👊  #countryball
00:15
Просмотров 1,4 млн
Распаковка iPhone 16 Pro Max
01:01
Просмотров 1,2 млн
Ромарио стал Ромой
00:46
Просмотров 308 тыс.
Load More Pagination React
10:07
Просмотров 27 тыс.
This React UI Library is GAME CHANGER!
18:13
Просмотров 528 тыс.
How to create a React App & File Cleanup
7:51
Просмотров 16 тыс.
How to CONDITIONAL RENDER in React ❓
10:15
Просмотров 36 тыс.
This Chess Bot is IMPOSSIBLE ELO.
28:04
Просмотров 295 тыс.
Learn React Click Events 👆
12:21
Просмотров 22 тыс.
React CARD components 🃏
11:59
Просмотров 60 тыс.