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

Пікірлер: 93

  • @aarongarcia2433
    @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
    @gabrielobafisile2299 Жыл бұрын

    I love the way you simplified this. Thanks bro

  • @autumn4421
    @autumn44218 ай бұрын

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

  • @growthrough2123
    @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

    @shaksham.22

    4 ай бұрын

    i was wondering about the ame

  • @RizaHariati
    @RizaHariati2 жыл бұрын

    Very simple to the point explanation. Thank you

  • @whysoserious-yj1ku
    @whysoserious-yj1ku2 жыл бұрын

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

  • @CKNMEDIA
    @CKNMEDIA2 жыл бұрын

    Excellent stuff. Its working. 🔥🔥

  • @ydub18
    @ydub18 Жыл бұрын

    Perfect explanation. Thank you!

  • @maxaquilino7264
    @maxaquilino72642 жыл бұрын

    Excellent stuff, well done!

  • @InteligenciaEficiente
    @InteligenciaEficiente2 жыл бұрын

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

  • @mahidharreddy8371
    @mahidharreddy83712 жыл бұрын

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

  • @todortodorov9240
    @todortodorov9240 Жыл бұрын

    Simple and effective. Thank you.

  • @vladko9623
    @vladko9623 Жыл бұрын

    Thank you so much. You have helped me! )

  • @joepilibi
    @joepilibi Жыл бұрын

    Simple and efficient, nice !

  • @michellephoebe
    @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?

  • @joecolas
    @joecolas2 жыл бұрын

    Thank you so much . this is very helpful

  • @rasulakhundov500
    @rasulakhundov5002 жыл бұрын

    Thank you so much. So good tutorial

  • @JenniferThomas-wz2qu
    @JenniferThomas-wz2quАй бұрын

    Very cool, thanks

  • @kelsola
    @kelsola2 жыл бұрын

    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.

    @a.human.

    2 жыл бұрын

    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

    @kelsola

    2 жыл бұрын

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

  • @velloss
    @velloss3 жыл бұрын

    helped me a lot, thankssssssss

  • @missionmaths3867
    @missionmaths3867 Жыл бұрын

    Thankyou you are a great teacher

  • @yehch989
    @yehch9893 ай бұрын

    Thank you so much!

  • @user-ks9zc3bi2p
    @user-ks9zc3bi2p3 ай бұрын

    perfect thank you bro

  • @dailyshorts723
    @dailyshorts7232 жыл бұрын

    great work bro

  • @pesahson
    @pesahson3 жыл бұрын

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

  • @prathmeshkalehere

    @prathmeshkalehere

    Жыл бұрын

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

  • @artanme

    @artanme

    Жыл бұрын

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

  • @andreporto7451
    @andreporto7451 Жыл бұрын

    very good, man!

  • @kishorkumarsoni
    @kishorkumarsoni3 жыл бұрын

    Thanks sir. Awasome..👌

  • @ainneo
    @ainneo2 жыл бұрын

    amazing!!!!! thank you!

  • @shaksham.22
    @shaksham.224 ай бұрын

    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

  • @visheshkumar8015
    @visheshkumar801511 ай бұрын

    kept simple and well explained

  • @sagarmisra6932
    @sagarmisra69323 жыл бұрын

    Not working with class component, any reference??

  • @shalombloodman1009
    @shalombloodman10092 жыл бұрын

    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.

  • @GamingDotaRagdoll
    @GamingDotaRagdoll Жыл бұрын

    Thank you, Sir!

  • @prathmeshkalehere
    @prathmeshkalehere Жыл бұрын

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

  • @LeGabrieell
    @LeGabrieell Жыл бұрын

    Thank you so much!!

  • @Netik-AbonneToi59
    @Netik-AbonneToi597 ай бұрын

    Thank you bro !

  • @Dwedari
    @Dwedari2 жыл бұрын

    Really appreciate it

  • @NguyenDat-ee8kv
    @NguyenDat-ee8kv Жыл бұрын

    Thank u bro i made it

  • @youhavetodoit9070
    @youhavetodoit9070 Жыл бұрын

    Thank You So Much

  • @shadowrebels1623
    @shadowrebels162314 күн бұрын

    thank you !!!!

  • @twistekk7
    @twistekk7 Жыл бұрын

    where to get this lorem ipsum text?

  • @dorocodes7280
    @dorocodes7280 Жыл бұрын

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

  • @Bhartiya_ekta
    @Bhartiya_ekta6 ай бұрын

    Thanks a lot 🎉

  • @harshithakapa8019
    @harshithakapa80192 жыл бұрын

    @the tech team can u plz share the code?

  • @abdullahjaved2044
    @abdullahjaved2044 Жыл бұрын

    Thanks Alot❤❤

  • @sunitajoshi-we7cn
    @sunitajoshi-we7cn11 ай бұрын

    Where i can get the code

  • @mazhabshosolihov1122
    @mazhabshosolihov1122 Жыл бұрын

    Thanks bro

  • @kirillpavlovskii8342
    @kirillpavlovskii83422 жыл бұрын

    Great, thanks

  • @alexeysedov278
    @alexeysedov278 Жыл бұрын

    thank you!

  • @MariaFerraro
    @MariaFerraro Жыл бұрын

    Thank you!!!!

  • @absoluteagency4306
    @absoluteagency43063 жыл бұрын

    Awesome and simple , thanks

  • @Scream-ne3np
    @Scream-ne3np2 жыл бұрын

    good job

  • @kalahari8295
    @kalahari82952 жыл бұрын

    Best 🔥

  • @ViKiNG_89
    @ViKiNG_89 Жыл бұрын

    Thanks )

  • @ImperioTeixeira
    @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

    @saikeerthana4809

    Ай бұрын

    yes

  • @DuckYou25
    @DuckYou252 жыл бұрын

    code works thanks, i dont what these dudes are saying

  • @marketingstudio16
    @marketingstudio1610 ай бұрын

    source code? sound quality?

  • @RizaGunturPrakoso
    @RizaGunturPrakoso2 жыл бұрын

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

  • @XxSouIxX

    @XxSouIxX

    2 жыл бұрын

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

  • @limitlessmedow4682

    @limitlessmedow4682

    Жыл бұрын

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

  • @codenamemoe9337

    @codenamemoe9337

    Жыл бұрын

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

  • @manitripathi9463

    @manitripathi9463

    Жыл бұрын

    kzread.info/dash/bejne/iqifq6iwgc7Hk7Q.html

  • @kangegha
    @kangegha2 жыл бұрын

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

  • @kalahari8295

    @kalahari8295

    2 жыл бұрын

    I is referring to a specific item index

  • @brandon400
    @brandon4002 жыл бұрын

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

  • @Paulluskelvin

    @Paulluskelvin

    Жыл бұрын

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

  • @mohammadmahdialvansaz8001
    @mohammadmahdialvansaz8001 Жыл бұрын

    thanks

  • @MrBuloy11
    @MrBuloy1111 ай бұрын

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

  • @thokozanichisembele8877
    @thokozanichisembele8877 Жыл бұрын

    shout you out brudda

  • @netsaosa4973
    @netsaosa4973 Жыл бұрын

    epic

  • @usamabintahir8284
    @usamabintahir82843 жыл бұрын

    code available?

  • @blesintotv1803
    @blesintotv18033 ай бұрын

    i is not defined

  • @user-ml4ux7lp1s
    @user-ml4ux7lp1s11 ай бұрын

    i have not worked

  • @temirov6411
    @temirov64112 жыл бұрын

    'i' is not defined no-undef

  • @MrLefteris3000

    @MrLefteris3000

    Жыл бұрын

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

  • @Paulluskelvin

    @Paulluskelvin

    Жыл бұрын

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

  • @theroastingershow161
    @theroastingershow1613 жыл бұрын

    not working properly

  • @Codingkite

    @Codingkite

    3 жыл бұрын

    yes

  • @marvellousadesanya8480
    @marvellousadesanya8480 Жыл бұрын

    volume extremely low.

  • @Codingkite
    @Codingkite3 жыл бұрын

    no working

  • @Codingkite
    @Codingkite3 жыл бұрын

    time visit my two hour😡 not working class

  • @orangelimesky
    @orangelimeskyАй бұрын

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

  • @Codingkite
    @Codingkite3 жыл бұрын

    fake video

  • @abdul01020

    @abdul01020

    2 жыл бұрын

    lol

  • @viog8421
    @viog84219 ай бұрын

    Gracias, fue muy útil

  • @temirov6411
    @temirov64112 жыл бұрын

    time visit my two hour😡 not working class