Build a React Accordion from Scratch | ReactJS tutorial

Learn how to build an accordion in ReactJS. We'll go through and demonstrate piece by piece how to put together an accordion.
💛 Be sure to comment like and subscribe to the channel! I have plenty more videos: / @thetechteam

[@aarongarcia2433]

Thank you so much! Of all the tutorials, articles, and codepens I searched through, this is the only one that worked in my case.

[@gabrielobafisile2299]

I love the way you simplified this. Thanks bro

[@RizaHariati]

Very simple to the point explanation. Thank you

[@autumn4421]

Simple, cool, effective and that's only the way which i could use
Thank you so much!

[@maxaquilino7264]

Excellent stuff, well done!

[@CKNMEDIA]

Excellent stuff. Its working. 🔥🔥

[@whysoserious-yj1ku]

Thank you! Dont know about the other comments.. i am working in Functional Components and this works like a charm

[@InteligenciaEficiente]

Great! will use this logic on my project, thank you!!

[@ydub18]

Perfect explanation. Thank you!

[@todortodorov9240]

Simple and effective. Thank you.

[@vladko9623]

Thank you so much. You have helped me! )

[@joepilibi]

Simple and efficient, nice !

[@mahidharreddy8371]

Thank You bro. .. You just saved my Day..

[@growthrough2123]

at minute 7:42 there are some styles added that the presenter doesn't talk about! Unless I missed it... He adds some styles to .content and then adds .content.show

[@shaksham.22]

i was wondering about the ame

[@joecolas]

Thank you so much . this is very helpful

[@rasulakhundov500]

Thank you so much. So good tutorial

[@pesahson]

Looks really good. That transition makes it work super cool.

[@prathmeshkalehere]

I did it all step by step but I can't seem to get transition effect on it

[@artanme]

@@prathmeshkalehere same, i even tried using chatgpt to help me, but it doesn't work

[@velloss]

helped me a lot, thankssssssss

[@ainneo]

amazing!!!!! thank you!

[@JenniferThomas-wz2qu]

Very cool, thanks

[@dailyshorts723]

great work bro

[@kelsola]

Prior to this video, I used an NPM package for my Accordion, but I caught a bug that couldn't be fixed and made no sense (over 5 hours wasted), so I knew I needed to build one from scratch. After watching your video, probably 45 minutes later, my "from scratch" Accordion is working perfectly. So thank you very much.

[@a.human.]

I feel you. I wasted my entire day today trying to fix a bug related to react slick. I finally got rid of it and built a carousel myself. Still, so much left to do today... I'm tired.

[@kelsola]

@@a.human. Yeah, working with packages can be a real pain in the butt when trying to fix undesired behaviors. I know that all too well from working with Rich Text Editors...

[@yehch989]

Thank you so much!

[@andreporto7451]

very good, man!

[@missionmaths3867]

Thankyou you are a great teacher

[@kishorkumarsoni]

Thanks sir. Awasome..👌

[@user-ks9zc3bi2p]

perfect thank you bro

[@LeGabrieell]

Thank you so much!!

[@Dwedari]

Really appreciate it

[@GamingDotaRagdoll]

Thank you, Sir!

[@Netik-AbonneToi59]

Thank you bro !

[@visheshkumar8015]

kept simple and well explained

[@youhavetodoit9070]

Thank You So Much

[@mazhabshosolihov1122]

Thanks bro

[@NguyenDat-ee8kv]

Thank u bro i made it

[@Bhartiya_ekta]

Thanks a lot 🎉

[@abdullahjaved2044]

Thanks Alot❤❤

[@kirillpavlovskii8342]

Great, thanks

[@shadowrebels1623]

thank you !!!!

[@MariaFerraro]

Thank you!!!!

[@alexeysedov278]

thank you!

[@absoluteagency4306]

Awesome and simple , thanks

[@michellephoebe]

I have been having issues with React accordions cause the packages make the documentation bigger.
This is the best! Thank you!
Do you have a tutorial on nested accordion?

[@shalombloodman1009]

the reason one would find trouble with the code is because it was made directly in the app.js file, you have to destructure it yourself and he said so in the video.

[@shaksham.22]

If anyone doesnt understand why the stuffs get hidden at 7:34 then its because he adds another class content.show to it (see at 13:42) where content class hides the answers and content.show reveals it

[@Scream-ne3np]

good job

[@ViKiNG_89]

Thanks )

[@kalahari8295]

Best 🔥

[@RizaGunturPrakoso]

after you set flex and center suddenly answer hidden, why is that?

[@XxSouIxX]

He added "max-height: 0" and "overflow: hidden" to the 'content' class off-screen, apparently.

[@limitlessmedow4682]

@@XxSouIxX wow thanks I was asking myself that same question

[@codenamemoe9337]

@@XxSouIxX Thank you, I was thinking the same thing.

[@manitripathi9463]

czcams.com/video/XtkIFwQkacQ/video.html

[@dorocodes7280]

would be awesome to publish the code and add a link to it in the video description

[@DuckYou25]

code works thanks, i dont what these dudes are saying

[@sagarmisra6932]

Not working with class component, any reference??

[@prathmeshkalehere]

I did it all step by step but I can't seem to get transition effect on it

[@mohammadmahdialvansaz8001]

thanks

[@harshithakapa8019]

@the tech team can u plz share the code?

[@kangegha]

what is the 'i' in the toggle function? 'index'? I got error saying that 'i' is indefined...

[@kalahari8295]

I is referring to a specific item index

[@ImperioTeixeira]

hi, very good video, I have a question though, can we use bootstrap accordion in react and to do the same thing you did?

[@saikeerthana4809]

yes

[@twistekk7]

where to get this lorem ipsum text?

[@sunitajoshi-we7cn]

Where i can get the code

[@brandon400]

it helps me. thx
how can i unselect an item?

[@Paulluskelvin]

Add the else keyword just after your if statement.
As in else setSelected(i);

[@thokozanichisembele8877]

shout you out brudda

[@MrBuloy11]

it is good but needs to fix the shaking part, every time it is toggle.

[@netsaosa4973]

epic

[@marketingstudio16]

source code? sound quality?

[@usamabintahir8284]

code available?

[@temirov6411]

'i' is not defined no-undef

[@MrLefteris3000]

too late propably but did you manage to find what was wrong?

[@Paulluskelvin]

Your map should receive at least two arguments. You probably didn't define it there.

[@blesintotv1803]

i is not defined

[@user-ml4ux7lp1s]

i have not worked

[@marvellousadesanya8480]

volume extremely low.

[@Codingkite]

no working

[@theroastingershow161]

not working properly

[@Codingkite]

yes

[@Codingkite]

time visit my two hour😡 not working class

[@orangelimesky]

Garbage. He doesn't explain anything about the css involved

[@Codingkite]

fake video

[@abdul01020]

lol

[@viog8421]

Gracias, fue muy útil

[@temirov6411]

time visit my two hour😡 not working class