Extend default className component

user_19127073 0
Viewed 44

Hey I use bootstrap with React and I try figure out, how I can extend my component by passing className props deeper. In my atom component I have two files. First one with component declaration.
Breadcrumb.js

export const Breadcrumb = (props) => {
  const { className } = props;
  const classes = getClasses(className);

  return (
    <Link to={props.path} className={classes} {...props}>
      {props.children}
    </Link>
  );
};

and another one with getClasses() which returns all default BS classes.
Breadcrumb.style.js

export const getClasses = (extra = "") => {
  const defaultClasses = getDefaultClasses();
  const addingClasses = extra;
  const classes = `${defaultClasses} ${addingClasses}`;

  return classes;
};

const getDefaultClasses = () => `ps-3 fs-3 fw-bold text-decoration-none`;

What I want to achieve is, when I'll invoke my Breadcrumb component, and I'll decied to extend it on extra classes I can do that by pass className props...like
TopBar.js

export const TopBar = () => {
  const breadcrumbs = useBreadcrumbs(routes, { disableDefaults: true });
  const classes = getClasses();

  return (
    <div className={classes}>
      {breadcrumbs.map(({ match, breadcrumb }) => (
        <Breadcrumb
          path={match.pathname}
          children={breadcrumb}
          className="cs_breadcrumb"
          key={uuidv4()}
        />
      ))}
    </div>
  );
};

But when I do that, my declare Breadcrumb className is override by invoke Breadcrumb className... Although in Breadcrumb.js console.log(classes) returns concated classes. Anyone knows how to achieve that or has any tips ?? I'll be glad

bootstrap-5 react-bootstrap reactjs css javascript
2 Answers

Change

export const Breadcrumb = (props) => {
  const { className } = props;
  const classes = getClasses(className);

  return (
    <Link to={props.path} className={classes} {...props}>
      {props.children}
    </Link>
  );
};

to

export const Breadcrumb = ({ className, ...rest }) => {
  const classes = getClasses(className);

  return (
    <Link to={props.path} className={classes} {...rest}>
      {props.children}
    </Link>
  );
};

So, you need to extract the className prop in the place where props was, and also add ...rest for the rest props.

user_156098760

I guess you want to extend component classes with other classes passed via props.

If I understand correctly, you can try like this:

export const Breadcrumb = (props) => {
  const { className } = props;
  const classes = getClasses(className);

  return (
    <Link to={props.path} className={[classes, className].join(" ")]} 
    {...props}>
      {props.children}
    </Link>
  );
};
user_74221860
Related