Build a React Accordion from Scratch | ReactJS tutorial
Вставка
- Опубліковано 25 сер 2024
- 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
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
i was wondering about the ame
Thank you so much! Of all the tutorials, articles, and codepens I searched through, this is the only one that worked in my case.
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.
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.
@@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...
I love the way you simplified this. Thanks bro
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
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.
Looks really good. That transition makes it work super cool.
I did it all step by step but I can't seem to get transition effect on it
@@prathmeshkalehere same, i even tried using chatgpt to help me, but it doesn't work
Simple, cool, effective and that's only the way which i could use
Thank you so much!
Thank you! Dont know about the other comments.. i am working in Functional Components and this works like a charm
Thanks bro
Very simple to the point explanation. Thank you
Very cool, thanks
perfect thank you bro
after you set flex and center suddenly answer hidden, why is that?
He added "max-height: 0" and "overflow: hidden" to the 'content' class off-screen, apparently.
@@XxSouIxX wow thanks I was asking myself that same question
@@XxSouIxX Thank you, I was thinking the same thing.
ua-cam.com/video/XtkIFwQkacQ/v-deo.html
would be awesome to publish the code and add a link to it in the video description
Thank You bro. .. You just saved my Day..
Great! will use this logic on my project, thank you!!
Thankyou you are a great teacher
thank you !!!!
Perfect explanation. Thank you!
Thank You So Much
Thank you so much. You have helped me! )
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?
Simple and effective. Thank you.
code works thanks, i dont what these dudes are saying
kept simple and well explained
Excellent stuff. Its working. 🔥🔥
I did it all step by step but I can't seem to get transition effect on it
Thank you so much . this is very helpful
Thank you so much. So good tutorial
Simple and efficient, nice !
Thank you so much!
Excellent stuff, well done!
Thank you bro !
helped me a lot, thankssssssss
what is the 'i' in the toggle function? 'index'? I got error saying that 'i' is indefined...
I is referring to a specific item index
Thanks a lot 🎉
Thank u bro i made it
Thank you so much!!
Thank you, Sir!
very good, man!
great work bro
thank you!
Really appreciate it
Thanks sir. Awasome..👌
it is good but needs to fix the shaking part, every time it is toggle.
amazing!!!!! thank you!
@the tech team can u plz share the code?
Thank you!!!!
Thanks Alot❤❤
where to get this lorem ipsum text?
Great, thanks
Thanks )
Not working with class component, any reference??
Awesome and simple , thanks
Where i can get the code
good job
it helps me. thx
how can i unselect an item?
Add the else keyword just after your if statement.
As in else setSelected(i);
source code? sound quality?
hi, very good video, I have a question though, can we use bootstrap accordion in react and to do the same thing you did?
yes
thanks
Best 🔥
i is not defined
shout you out brudda
code available?
epic
i have not worked
'i' is not defined no-undef
too late propably but did you manage to find what was wrong?
Your map should receive at least two arguments. You probably didn't define it there.
not working properly
yes
no working
volume extremely low.
Garbage. He doesn't explain anything about the css involved
time visit my two hour😡 not working class
fake video
lol
Gracias, fue muy útil
time visit my two hour😡 not working class