How do I add a class to each element in an array of React Components?

Question

This is my current code:

// src/components/Main.tsx
import * as React from 'react';
import { ReactElement } from 'react';

import * as styles from '../styles/Main.module.scss';

type MainProps = {
  leftBtnGroup: ReactElement[],
  rightBtnGroup: ReactElement[],
  children: string,
};

const Main = ({ leftBtnGroup, rightBtnGroup, children }: MainProps) => (
  <>
    <div className={styles.main__btnBar}>
      <div className={styles.main__btnBar__leftBtnGrp}>
        {
          leftBtnGroup.map((btn) => {
            btn.props.className += ` ${styles.main__btnBar__btn}`;

            return btn;
          })
        }
      </div>
      <div className={styles.main__btnBar__rightBtnGrp}>
        {
          rightBtnGroup.map((btn) => {
            btn.props.className += ` ${styles.main__btnBar__btn}`;

            return btn;
          })
        }
      </div>
    </div>
    {children}
  </>
);

export default Main;

Two arrays of components are passed into the Main component as input and I want to add a class to each of these components. The function does not know what these components are (i.e. could be buttons, links, divs, or other components) but it can be asserted that they all have a className prop. How can I implement this? When I tried the above, I got this linting error:

ESLint: Assignment to property of function parameter 'btn'.(no-param-reassign)

If this is for styling, can't you just use a selector such as .main__btnBar__leftBtnGrp > *? — Altareos
– Altareos, Commented May 30, 2021 at 7:47
@Altareos That works but I'm trying to avoid using the wildcard as far as possible. — thegreatjedi
– thegreatjedi, Commented May 30, 2021 at 7:52

Aaron Kvarnlov-Leverty · Accepted Answer · 2021-05-30 08:07:49Z

3

You should probably use React.cloneElement( https://reactjs.org/docs/react-api.html#cloneelement )

{
  leftBtnGroup.map(btn => {
    // I used ?? but you can use your choice of checking for existing
    // classes. Without checking, if they have no existing class this
    // would add an 'undefined' class where the existing classes go.
    return React.cloneElement(btn, { className: `${btn.props.className ?? ''} ${styles.main__btnBar__btn}` })
  })
}

edited May 30, 2021 at 8:07

answered May 30, 2021 at 8:02

Aaron Kvarnlov-Leverty

1411 silver badge6 bronze badges

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

Collectives™ on Stack Overflow

How do I add a class to each element in an array of React Components?

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