React - adding class to children components

Question

im using react and I have a component that simply needs to render the children and add them a class according to a condition. Whats the best way of doing it?

Answer 1

I figured it out a week ago, this is what I wanted :

export default class ContainerComponent extends React.Component {
    constructor(props) {
        super(props);

        this.modifyChildren = this.modifyChildren.bind(this);
    }

    modifyChildren(child) {
        const className = classNames(
            child.props.className,
            {...otherClassses}
        );

        const props = {
            className
        };

        return React.cloneElement(child, props);
    }
    render() {
        return (<div>
            {React.Children.map(this.props.children, child => this.modifyChildren(child))}
        </div>);
    }
}

Answer 2

For the sake of simplicity:

const StyleInjector = ({ children }) => {
   const StyledChildren = () =>
    React.Children.map(children, child =>
      React.cloneElement(child, {
        className: `${child.props.className} ${PUT_YOUR_CLASS_HERE}`
      })
    );

  return <StyledChildren />;
};

Answer 3

Weeks back I had a scenario of carousal to be implemented in react, nothing fancy just simple toggling of active class. I followed this approch, works like a charm but let me know this is a good approach.

{
 this.props.children.map((slide, index) => {
   return React.cloneElement(slide, {
      key: index,
      className: (this.state.currentActiveIndex === index) ?'active' : ''
   });
 })
}

Answer 4

You can pass a prop down to the child and it can choose what class to apply (or just pass the class name but this is more semantic):

<Parent contentVisible={true}>
  <Child />
</Parent>

In your child render:

const classes = [];

if (props.contentVisible)
  classes.push('visible');

<div className={classes.join(' ')} />

Answer 5

Here's modern solution that's type-safe (Typescript 5.0, React 18.2):

import * as React from 'react';
import type { ReactNode, ReactElement, ReactPortal, PromiseLikeOfReactNode, ReactFragment } from 'react';

type StylizeChildrenProps = {
  children?: ReactNode
  className: React.HTMLAttributes<any>['className']
}

export function StylizeChildren({ children, className = '' }: StylizeChildrenProps) {
  if (children == null) return null;

  className = className.trim();
  if (!className) return <>{children}</>

  return <>
    {React.Children.map(children, child => addClassToNode(child, className))}
  </>
}

// Separate out into its own function because Promise-like nodes require this to be recursive
export function addClassToNode(node: ReactNode, className: string): ReactNode {
  if (node == null) {
    node satisfies null | undefined

    return node
  }

  if (typeof node !== 'object') {
    node satisfies string | number | boolean

    // wrap in a span, somewhat arbitrary decision
    return <span className={className}>{node}</span>
  }

  if ('props' in node) {
    node satisfies ReactElement | ReactPortal

    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
    const existing: unknown = node?.props?.className;
    if (existing && typeof existing === 'string') {
      className = `${existing} ${className}`
    }
    return React.cloneElement(node, { className })
  }

  if ('then' in node) {
    node satisfies PromiseLikeOfReactNode

    return node.then(n => addClassToNode(n, className))
  }

  node satisfies ReactFragment

  // wrap in div, somewhat arbitrary decision
  return <div className={className}>{node}</div>
}

It would be straightforward to modify this to do other things when it encounters non-object types or ReactFragments. For example, a ReactFragment is an Iterable, so instead of wrapping it in a div, you could iterate through all of its children and give it the class instead.

The satisfies statements are there because I think they make it more clear what's happening and will reveal some otherwise nasty bugs if the underlying types or React APIs ever change. If you're running a Typescript version lower than 4.9, just remove them and everything should still work fine.

Answer 6

Inside render method of your component:

var childClasses = [],
    childClassNames; 
if (condition) {
    childClasses.push('my-class-name'); 
} 
childClassNames = childClasses.join(' ');

return (<div className={childClassNames}>
     .... (your component here)
</div> );