classNames is not defined

Question

I am newbie in react development and trying to understand how classNames work in react.

This is the react code from my book. I just copied it.

const MOUNT = document.getElementById('root');
class App extends React.Component {
  render() {
    const klasses = classNames({
      box: true, // always apply the box class
      alert: this.props.isAlert, // if the prop is set
      severity: this.state.onHighAlert, // with state
      timed: false // never apply this class
    });
    return React.createElement(
      'div',
      {className: klasses},
      React.createElement('h1', {}, 'Hello world')
    );
  }
}
ReactDOM.render(React.createElement(App, {}), MOUNT);

I included script file with this code to html and browser console shows such error.

app.js:4 Uncaught ReferenceError: classNames is not defined
at App.render (app.js:4)
at finishClassComponent (react-dom.js:11320)
at updateClassComponent (react-dom.js:11297)
at beginWork (react-dom.js:11676)
at performUnitOfWork (react-dom.js:13644)
at workLoop (react-dom.js:13753)
at HTMLUnknownElement.callCallback (react-dom.js:1527)
at Object.invokeGuardedCallbackDev (react-dom.js:1566)
at invokeGuardedCallback (react-dom.js:1423)
at performWork (react-dom.js:13871)

what is the problem?

Answer 1

So, I think you'll want to install the classnames npm module to bind conditional classes defined in an object.

https://www.npmjs.com/package/classnames

npm i classnames --save

Next you'll want to require that in your .js / .jsx file before use.

import classNames from 'classnames';

Then use the module to bind your classes to the React Element.

import classNames from 'classnames';
const MOUNT = document.getElementById('root');
class App extends React.Component {
  render() {
    const klasses = classNames({
        box: true, // always apply the box class
        alert: this.props.isAlert, // if the prop is set
        severity: this.state.onHighAlert, // with state
        timed: false // never apply this class
    });
    return React.createElement(
      'div',
      {className: klasses},
      React.createElement('h1', {}, 'Hello world')
    );
  }
}
ReactDOM.render(React.createElement(App, {}), MOUNT);

Hope this helps, looks like Tholle got there first.

Answer 2

classnames is a library that you need to install and import into your module. Try npm i -S classnames in your shell, and then import classNames from 'classnames'; at the top of your JavaScript file.

Answer 3

The answers above work but you need change the line that imports app.js in your index.html file:

<script type="module" "src="app.js"></script>

The suggestions above worked for me (I am reading the same React book as your).

Answer 4

1. Per the comment from @kust kust you need to add type="text/babel" to the <script> tag for app.js.
2. You need to update all paths to be relative ... from / to ./