Render different component on click without react router - React

[@LWolf94]

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]

Thank you, much appreciated :)

[@pritamraha4369]

even after 4 years, in the 2024, this video is project-saver for me 😍

[@Durood-O-Salam]

After searching lot of videos but this helps a lot.

[@abdulhannan-lg6kb]

hours of hard work and all it needed was a random russian guy

[@gwenthedoll3677]

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]

I'm not Russian, but I appreciate the kind words. Thanks for watching :)

[@h3webdevtuts]

@@gwenthedoll3677 Thank you :)

[@beknurabdurashit2830]

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

[@michelpinto4165]

THANK YOU SO MUCH 😭 I've spent so much on this and it was this simple, thanks a lot!

[@h3webdevtuts]

Glad you found it usefull. Thank you so much :)

[@Will-le8yj]

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

[@robertmasters01]

I was looking for a react router solution, however i decided to go with this instead lol thanks my man!

[@h3webdevtuts]

Glad you found what you needed, I have a router tutorial as well in case you ever wanna use that as well. Thank you :)

[@AKSHAT150]

First comment on RUclips ever. Thank you so much for this! Cheers

[@h3webdevtuts]

Thank you :)

[@muhammadibrahimkhan7052]

Thanks brother you saved my project. And I really appreciate your efforts 👍👍

[@h3webdevtuts]

Thank you, much appreciated :)

[@akankshashanbhag9247]

This helped me with my new assignment, thank you so much! 😭

[@h3webdevtuts]

Glad I could help. Thanks for watching :)

[@nikeshgupta1241]

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

[@ericliss9600]

You made this so easy to understand! Thank you. Worked like a charm on my project.

[@SkyLove512]

Great Tutorial. Very direct and simple implementation.

[@h3webdevtuts]

I'm glad you found it useful. Thank you :)

[@BiggieBigM]

great tutorial, is there a way to make it render a component instead ?

[@Giggle_Beats]

Thanks a lot........it was so smooth to get the right way to do it.

[@blumoon9935]

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]

Thank you so much :)

[@maurillekobri9484]

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]

I think it’s doable with another map in this case inside app.js file, but it depends how your data is stuctured

[@h3webdevtuts]

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]

@@Shadyholic Thank you!

[@maurillekobri9484]

@@h3webdevtuts Thank you! Much appreciated!

[@sanjukandagal]

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]

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 :)

[@rafiqjarjous7542]

yep! another problem solved by you
thank you soo much boss

[@h3webdevtuts]

Glad I could help. Thanks for watching :)

[@damianroiz128]

Thank you for sharing, I followed along and I have some errors, Do you have the repo for this ?

[@h3webdevtuts]

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 :)

[@marimuthur9456]

Extraordinary explanation thank you so much 👌🏼👌🏼👌🏼😊

[@h3webdevtuts]

Thank you :)

[@timzeynalov3537]

thanks but how I can choose initial state ? for example if I need the One to be shown by default

[@h3webdevtuts]

Active state is what you want to change to whichever one you wanna display initially. Thanks for watching :)

[@meliarr2012]

Thanks for explaining this so simply!

[@h3webdevtuts]

Thank you so much :)

[@rimuru22]

dude.. this helped me a lot, thank you!

[@h3webdevtuts]

Glad I could help. Thank you :)

[@silverfox3074]

If we click in the div that is displayed, how can we show another div, with different data inside?

[@harsharamayanam7484]

WOW. You're a lifesaver! Thank you very much!

[@h3webdevtuts]

I'm glad you found it helpful. Thanks for watching :)

[@تعليمتساريحشعر]

Thank You very much, I fix my router issues

[@h3webdevtuts]

Glad you got it working. Thanks for watching :)

[@punithgowda1649]

God or what ? ❤️🤩

[@h3webdevtuts]

Thank you :D

[@wont8525]

If the change button is in the Card components what do I have to do..?

[@h3webdevtuts]

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 :)

[@nikhilbhardwaj6055]

Like I'm on page number 4, If I do Alt+Left Arrow, would it take me to page number 3?

[@h3webdevtuts]

I'm not sure what your concern is, and if that would work or not. Thanks for watching :)

[@andibajrami4327]

is there any way to add an opacity transition to this

[@h3webdevtuts]

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 :)

[@anoop.225]

It really helps, Thank You :) a "active" class loading to all links , how to fix it only for active button/links ?

[@h3webdevtuts]

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 :)

[@padukes]

Nice tutorial, cheers. To the point

[@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

[@akashkvarghese7380]

You saved me bro.... You saved me

[@h3webdevtuts]

Thank you :)

[@darshantak5872]

Lifesaver you are.

[@h3webdevtuts]

Glad I could help. Thanks for watching :)

[@khoilam7569]

supper clean easy nice thanks bro

[@h3webdevtuts]

Thank you so much :)

[@purumohite6874]

Thank you! You made my day 🙂

[@wassup102]

THANK YOU SO MUCH YOU SAVED ME

[@h3webdevtuts]

Thank you :)

[@kallepallinikitha5159]

how to get two cards when we click only on one button

[@h3webdevtuts]

Hi, you can add a second object inside first array and that's gonna give you another card. Hope that helps. Thanks for watching :)

[@noahsparkes7506]

This vid just saved my ass, thank you!

[@anoop.225]

It really helps, Thank You :)

[@h3webdevtuts]

Thank you :)

[@avishek_ataur]

very nice and simple

[@h3webdevtuts]

Thank you :)

[@sasipreethamtanuku2426]

Thank you soo much .You saved me

[@h3webdevtuts]

No worries. Thanks for watching :)

[@naruto_uzumakhi5716]

thanks u save a lot if time

[@DiariosD1Dev]

Very good, thank you bro!!!

[@stayInTheGreen_]

Genius man

[@h3webdevtuts]

Thanks :)

[@ayoolaoloyede1507]

THANK YOU!💯💯

[@h3webdevtuts]

Thank you :)

[@ACM4K]

How to do this on android? I mean the syntax

[@h3webdevtuts]

Not sure what do you mean by that, can u explain further? Thanks for watching :)

[@wwechamp888]

Really Helpful !

[@h3webdevtuts]

Thank you so much :)

[@amirkian1181]

too little font ,I couldnt see anything

[@h3webdevtuts]

Will make sure to fix that for future videos, thanks for a suggestion.

[@hilarioobiangobiangmangue8111]

Thanks a lot!

[@h3webdevtuts]

Thank you :)

[@akhadtop2067]

great tuto

[@h3webdevtuts]

Thank you :)

[@BabyYoda5555]

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]

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. :)

[@andreivascul300]

Amazing

[@h3webdevtuts]

Thanks :)

[@adelgafo7412]

Thanks bro

[@h3webdevtuts]

Thank you :)

[@adnanhashem6714]

wow thanks

[@h3webdevtuts]

Thank you :)

[@panik_79]

respect++ dude

[@panik_79]

you just got a new subscriber !

[@webtech7242]

Its simply tabs

[@grigoris56]

Thank you very much!