How to add class via rest?

Question

React

function Button({children, ...rest}) {
    return (
        <button className="great-button">
            {children}
        </button>
    );
}

If you try like this, it's logical that it won't work.

function Button({children, ...rest}) {
    return (
        <button {...rest} className="great-button">
            {children}
        </button>
    );
}

How can I correctly add a class to buttonwithout losing the existing one .great-button?

Answer 1

const Button = ({ children, className = '', ...rest }) => (
  <button {...rest} className={`button ${className}`}>
    {children}
  </button>
);