Coding an Accordion component using React

Coding a react accordion component using react.
00:00 Intro
00:27 Basic accordion inside App.js
09:08 Making the Accordion Component
12:00 Rendering multiple accordions using an array
------------
For those who don't know, I'm a full stack web developer who has been in the industry for over 5 years now. There is a lot of things I have learned along the way and I'd like to share that knowledge with anyone wanting to learn!
like this video if you found it useful and would like to see more videos of the same content.
subscribe to my channel if you are trying to improve your abilities as a web developer, software engineer, or even if you are just learning to code.
Don't forget to turn on those bell notifications!
Book mark these links!
Twitter / codylseibert
Discord / discord
GitHub github.com/codyseibert/youtube
I give credit to:
Toptal Subtle Patterns - for the thumbnail background patterns

[@mikeagbaji]

Awesome video! I have been watching many other videos and they all followed difficult steps and it was hard to understand. Yours is very easy method. Thanks

[@abdulrahimnuhu5488]

Thanks man. simply explained.

[@ClosureWebDevMore]

Great vid, Cody! Keep up the nice work :)

[@WebDevCody]

Thanks a ton!

[@saikrishna2918]

Loved your explanation man. Just subscribed to your channel.

[@WebDevCody]

Awesome welcome!

[@kenansari]

Thank you, Cody, it is really helpful (Y)

[@WebDevCody]

glad to hear!

[@bssushmitha6534]

Awesome video. I saw many other videos and they all followed difficult steps and it was hard to understand. You made it so easy. Thank you so much for this video. Highly recommend to anyone who wants to watch accordion example using React(or with hooks).

[@WebDevCody]

glad it helped you out!

[@proemail3237]

to arrange the plus symbol you could simply make a parent element div and then add flex, justify content : space-around it should do it dynamically rather then position just two cents. But awesome tutorial so easy to follow

[@adelaionce]

Thank you so much😇

[@argens]

Wow, till 5:06 I got everything explained in such an easy way. Thanks a lot!

[@WebDevCody]

so what happened after 5:06 O_o

[@argens]

@@WebDevCody Sorry, I meant, till 5:06 I got everything, that I was looking for. You give the information in a really clear way. Without any off-tops, just straight to the point. Also the content till the end of the video is really great, especially the real life example at 12:25. This is something, that I am missing in other videos.

[@khandoor7228]

Love the content WDJ the more React Hooks features the better. Please try an image slider from an api maybe pixabay or unsplash!!

[@WebDevCody]

I could try doing that!

[@khandoor7228]

@@WebDevCody TY Sir!!!

[@WebDevCody]

I made a video for you. If you want transitions I can do that in another video

[@khandoor7228]

@@WebDevCody I checked it out it was really cool! I thumbed up and commented!!

[@tatianakruglaya6760]

Thank you. Very good but how to link to the third accordion from another page. you have an example?

[@rinkoshopper4027]

To have transition you need to do this with css instead right? like toggling between height:0 and height:auto right?

[@WebDevCody]

Yeah I believe so, you might have to make sure the body is always on the page but has a height of 0 initially

[@Artisticanand]

You explained very well bro. I have doubt, whenever I add too big a title my title is going outside the div. Is there anyway to put all title content inside the div?

[@WebDevCody]

You could add word wrap on the div to keep it inside

[@Artisticanand]

@@WebDevCody okay i wil do it.. tnx bro 4 reply 😇

[@seeban1]

Is it possible for this acordion to expand if the output is negative and close if the output is positive??

[@WebDevCody]

Yeah, just use {myNumber >= 0 &&

[@luciobuey]

Hi, thanks for the video, it was very helpful. is it possible for this accordion to close the other tabs while clicking on one?

[@WebDevCody]

yeah I think that's possible

[@luciobuey]

@@WebDevCody how? 😅 Using the same state?

[@WebDevCody]

@@luciobuey if you only want one opened at a time, you’d need to pull state out into the parent component and pass that state into all the accordion components. The accordions would have to check if the state passed in matches the I’d of the accordion. I can make a video on it if you want

[@luciobuey]

@@WebDevCody I think that I understad you but anyway, it would be great a video! thanks a lot :D

[@WebDevCody]

I’ll have a vid published tomorrow morning for you

[@argens]

Is there a way to style your accordion? So that it wouldn't just pop out?

[@WebDevCody]

Do you mean animate? If so, yes you can with css transitions and you may need a react library to help

[@argens]

@@WebDevCody yes, animate, sorry. How can be this achieved? Which element should, for example, transitioned?

[@WebDevCody]

Aaron Erdwyn I think you’d need the transition on accordion-body. The element that is hiding and showing is what you want to animate. With react animations sometimes require you to use an animation library since the elements are being removed and added to the dom.

[@WebDevCody]

Aaron Erdwyn or refactor to instead of using {isOpen &&.. dynamically add and remove a css class

[@argens]

@@WebDevCody Thanks for the answer. You helped me a lot! :-) I went for the refactor solution with dynamically adding and removing css classes to accordion-body. Now, when I know the right way, it will be a lot easier in the future to use it. Also this stackoverflow question/answer was helpful: stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css/ If anyone else would be curious, here is my solution: codesandbox.io/s/react-accordion-dsefh?file=/src/App.js:223-252 So thanks a lot for the right tips and once more for the great video!

[@aselalymbaeva3798]

👍