The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building an accordion component with React

Building an accordion component with React

8:11
In this lesson, we build an accordion component (similar to Chrome's native `<details>` and `<summary>` elements) with React. We walk through setting up the component render function, props, state, propType validation, and adding conditional inline styling based on the state (if the accordion details are active or not). All done in ES6.
Watch this lesson now
Avatar
egghead.io

In this lesson, we build an accordion component (similar to Chrome's native <details> and <summary> elements) with React. We walk through setting up the component render function, props, state, propType validation, and adding conditional inline styling based on the state (if the accordion details are active or not). All done in ES6.

Avatar
Nishan Lakmal

is it best practice to define styles in a separate module instead of the component itself ?

In reply to egghead.io
Avatar
Trevor

Hi Nishan, sadly, there are not very many best practices around using CSS with React yet. Facebook suggests using "React inline styles" as I have done in this lesson (which you can either have inside the file as I did in this lesson, or export/import from another file). Some people are using separate CSS or pre-processor files (like Sass). Its really up to you. I personally really like inline styles, especially for state-specific styling, as I feel it helps to keep the component more self contained; but every project and component is different, so I would suggest trying out a few different styles and seeing what you like :) You can always use plain old CSS files with classes and apply them to components with the "className" prop if you don't feel comfortable with inline styles.

Does that make sense? I hope this helps!

In reply to Nishan Lakmal
Avatar

I found using className easier.

In reply to Trevor
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?