How to use props to pass custom classes to react components

It is sometimes important to be able to pass custom class names to different instances of react components.

React allows for this via an array prop passed to the component:

nav.jsx:

export default function ReactBanner({ customClass = [] }) {
  return (
    <nav className={`navbar navbar-expand-lg navbar-light bg-light ${customClass.join(' ')}`}>
    //internal markup of component
    </nav>
  );
}

The prop of customClass is assigned an empty array, and then using interpolation the Array method of .join is called on it.

In my case, this nav component is being loaded by main.js. I created the function loadNav() that creates and renders the nav component:

import ReactNav from "./dist/bca-react-component-library/nav/nav.js";

function loadNav() {
  const navRoot = createRoot(document.getElementById("react-nav"));
  navRoot.render(React.createElement(ReactNav, { customClass: ['test'] }));
}

In the call of React.createElement I am passing two arguments. The first is the imported nav component, the second is the customClass prop, now with an array populated with a single item ‘test’.

When .join is run on the component, the string ‘test’ is output as a class on the component: