Using map method, how to use multiple classname in React.js?

Question

please check out my code first.

import styles from './calculator.module.css';

const BUTTONS = [
  {
    key: '+/-',
    styled: 'symbol',
  },
  {
    key: '0',
  },
  {
    key: '.',
    styled: 'symbol',
  },
  {
    key: '=',
    styled: 'equal',
  },
];

const Calculator = () => {
  return (
    <div className={styles.calculator}>
      <section className={styles.buttonGrid}>
        {BUTTONS.map((btn, i) => {
          return (
            <button
              type="button"
              className={`${styles.buttons} ${styles.btn.styled}`} //here is the problem.
              key={`${btn.key}_${i}`}
            >
              {btn.key}
            </button>
          );
        })}
      </section>
    </div>
  );
};

export default Calculator;

Here, I want to use map method and give another classname to style specific components. However, it seems doesn't work.

I tried this way also.

        {BUTTONS.map((btn, i) => {
         
          const customStyle = btn.styled

          return (
            <button
              type="button"
              className={`${styles.buttons} ${styles.customStyle}`}
              key={`${btn.key}_${i}`}
            >
              {btn.key}
            </button>
          );
        })}

and It didn't work well. I have no idea how to solve this problem. How can I get through this?

How do I ask a good question?: "Introduce the problem before you post any code" — Andreas
– Andreas, Commented Sep 17, 2022 at 6:56
@Andreas My bad. I was in a hurry. Next time I will keep that in mind. — Aden Lee
– Aden Lee, Commented Sep 17, 2022 at 6:57
How do I ask a good question?: "Describe the problem. "It doesn't work" isn't descriptive enough to help people understand your problem. Instead, tell other readers what the expected behavior should be. Tell other readers what the exact wording of the error message is, and which line of code is producing it. Use a brief but descriptive summary of your problem as the title of your question." — Andreas
– Andreas, Commented Sep 17, 2022 at 7:01

Aden Lee · Accepted Answer · 2022-09-17 06:59:46Z

1

One of the possible soulutions was this.

className={`${styles.buttons} ${styles[btn.styled]}`}

However, if you try use this format,

const BUTTONS = [
  {
    key: '+/-',
    styled: 'symbol',
  },
  {
    key: '0',
    styled: ''
  },
  {
    key: '.',
    styled: 'symbol',
  },
  {
    key: '=',
    styled: 'equal',
  },
];

You have to add empty string K:V format in the empty ones.

answered Sep 17, 2022 at 6:59

Aden Lee

2601 gold badge6 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Using map method, how to use multiple classname in React.js?

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