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
Thank you so much! Of all the tutorials, articles, and codepens I searched through, this is the only one that worked in my case.
I love the way you simplified this. Thanks bro
Simple, cool, effective and that's only the way which i could use Thank you so much!
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
4 ай бұрын
i was wondering about the ame
Very simple to the point explanation. Thank you
Thank you! Dont know about the other comments.. i am working in Functional Components and this works like a charm
Excellent stuff. Its working. 🔥🔥
Perfect explanation. Thank you!
Excellent stuff, well done!
Great! will use this logic on my project, thank you!!
Thank You bro. .. You just saved my Day..
Simple and effective. Thank you.
Thank you so much. You have helped me! )
Simple and efficient, nice !
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?
Thank you so much . this is very helpful
Thank you so much. So good tutorial
Very cool, thanks
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.
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
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...
helped me a lot, thankssssssss
Thankyou you are a great teacher
Thank you so much!
perfect thank you bro
great work bro
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
very good, man!
Thanks sir. Awasome..👌
amazing!!!!! thank you!
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
kept simple and well explained
Not working with class component, any reference??
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.
Thank you, Sir!
I did it all step by step but I can't seem to get transition effect on it
Thank you so much!!
Thank you bro !
Really appreciate it
Thank u bro i made it
Thank You So Much
thank you !!!!
where to get this lorem ipsum text?
would be awesome to publish the code and add a link to it in the video description
Thanks a lot 🎉
@the tech team can u plz share the code?
Thanks Alot❤❤
Where i can get the code
Thanks bro
Great, thanks
thank you!
Thank you!!!!
Awesome and simple , thanks
good job
Best 🔥
Thanks )
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
code works thanks, i dont what these dudes are saying
source code? sound quality?
after you set flex and center suddenly answer hidden, why is that?
@XxSouIxX
2 жыл бұрын
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
Жыл бұрын
kzread.info/dash/bejne/iqifq6iwgc7Hk7Q.html
what is the 'i' in the toggle function? 'index'? I got error saying that 'i' is indefined...
@kalahari8295
2 жыл бұрын
I is referring to a specific item index
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);
thanks
it is good but needs to fix the shaking part, every time it is toggle.
shout you out brudda
epic
code available?
i is not defined
i have not worked
'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.
not working properly
@Codingkite
3 жыл бұрын
yes
volume extremely low.
no working
time visit my two hour😡 not working class
Garbage. He doesn't explain anything about the css involved
fake video
@abdul01020
2 жыл бұрын
lol
Gracias, fue muy útil
time visit my two hour😡 not working class