Setting className string dynamically Javascript \ React

Question

In my current project, I'm setting up mobile support the following way:

1) I'm creating all the relevant components both for desktop and mobile. On most of my pages, they're the same.

2) I'm creating two .scss files, one for desktop and one for mobile (determined by a media query covering the entire file)

3) I'm then attaching both styles in the className of my components, and then only the relevant file gets set. It looks like this:

// Styles
import styles from '../../components/Timeline/timeline.scss';
import mobileStyles from '../../components/Timeline/mobileTimeline.scss';

// Example component
<Row className={`${styles.container} ${mobileStyles.container}`}>
   <div className={`${styles.myComponent} ${mobileStyles.myComponent}`}/>
</Row>

It works great, but in order to make the code a bit cleaner, I decided to write a helper function to generate the entire string for the className ->

const setStyle = styleName => `${styles.styleName} ${mobileStyles.styleName}`

However, setStyle always returns 'unidentified' (*the function is defined after the styles imports of-course)

I think I understand why it happens, but I wonder, is there a way we could dynamically access style object properties like that?

Thanks in advance!

Alvaro · Accepted Answer · 2020-03-01 09:31:48Z

4

To get a property from an object given the key name in a variable, use the bracket notation:

const setStyle = styleName => `${styles[styleName]} ${mobileStyles[styleName]}`

This assumes that styles and mobileStyles are available in the scope of the function, otherwise you would also need to pass them:

const setStyle = (styleName, styles, mobileStyles) => `${styles[styleName]} ${mobileStyles[styleName]}`

edited Mar 1, 2020 at 9:31

answered Mar 1, 2020 at 9:21

Alvaro

9,81210 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting className string dynamically Javascript \ React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related