Conditional formatting in React - adding or appending CSS classes

Question

What's a more concise way to apply conditional formatting to this statement?

const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => {
  if (this.props.store.currentPage === this.props.pageNum) {
    return (
      <PaginationLink className={styles.bold} onClick={this.props.store.goToPage(this.props.pageNum)} />
    );
  }
  return (
    <PaginationLink className={styles.primary} onClick={this.props.store.goToPage(this.props.pageNum)} />
  );
}));

Specifically, if the current page number is detected as being current, the ".bold" class should be applied. Otherwise, the ".primary" class should be applied.

As a related question, is it possible to append classes to each other? So for example, the ".primary" class is applied either way, but ".bold .primary" is applied if the conditions are met?

For the 2nd Q, check out classnames which is very handy library for manipulating classes. (About 370B though - bundlephobia.com/[email protected]) — dance2die
– dance2die, Commented Mar 13, 2019 at 17:48

Robert P · Accepted Answer · 2019-03-13 18:18:03Z

5

You can do something like this:

const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => {
  const style = store.currentPage === pageNum ? styles.bold : styles.primary;

  return (
    <PaginationLink className={style} onClick={store.goToPage(pageNum)} />
  );
}));

For the second question, you could apply both classes (".bold .primary") if you want styles from both CSS classes to be applied.

edited Mar 13, 2019 at 18:18

Robert P

16k11 gold badges74 silver badges118 bronze badges

answered Mar 13, 2019 at 17:38

Joru

4,4361 gold badge21 silver badges13 bronze badges

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

6 Comments

John Ruddell Over a year ago

could also use an object to map styles to conditions. if there is a necessity for more then 2-3 styles id recommend going that approach so you don't get into ternary hell :) got my vote regardless! :)

IAspireToBeGladOS Over a year ago

Could you explain how it works, logically? Specifically, this line: this.props.pageNum ? styles.bold : styles.primary; - I see what you're doing, but want to make sure I understand why it works. :)

Joru Over a year ago

That's a ternary expression, it's equivalent to let style = styles.primary; if(this.props.store.currentPage === this.props.pageNum) style = styles.bold;. Basically picking out the right style to use with a conditional like you were doing in your original code, but storing it in a variable to avoid duplication.

IAspireToBeGladOS Over a year ago

Thank you, that makes sense!

IAspireToBeGladOS Over a year ago

So if I were modifying it to have both expressions by default: const style = this.props.store.currentPage === this.props.pageNumber ? styles.primary.bold : styles.primary; That would make styles.primary.bold the one activated by the conditional, and styles.primary would be the default?

|

Collectives™ on Stack Overflow

Conditional formatting in React - adding or appending CSS classes

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related