Uncaught SyntaxError: Unexpected token < in React

Question

I'm working on a react project and trying to display a dialog with react-bootstrap. I just copied a working react-bootstrap snippet in a js file but it's not working for me, I'm having Uncaught SyntaxError: Unexpected token < next to the <div className='static-modal'> line.

Here is the content of the js file:

(function (context) {

  // notification view
  TheGraph.Notification = React.createFactory( React.createClass({
  //TheGraph.Notification = React.createClass({
    componentDidMount: function () {
    },

    handleHide: function () {
      alert('Close me!');
    },

    render: function () {
      return (
        <div className='static-modal'>
          <Modal title='Modal title' bsStyle='primary' backdrop={false} animation={false} container={mountNode} onRequestHide={handleHide}>
            <div className='modal-body'>
              One fine body...
            </div>
            <div className='modal-footer'>
              <Button>Close</Button>
              <Button bsStyle='primary'>Save changes</Button>
            </div>
          </Modal>
        </div>
      );
    }
  });
})(this);

When I put use " in return line as follows:

return ("<div className='static-modal'><Modal title='Modal title' bsStyle='primary' backdrop={false} animation={false} container={mountNode} onRequestHide={handleHide}><div className='modal-body'>One fine body...</div><div className='modal-footer'><Button>Close</Button><Button bsStyle='primary'>Save changes</Button></div></Modal></div>");

I get this error:

Uncaught Error: Invariant Violation: ReactCompositeComponent.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object

Any idea what is the mistake here?

Answer 1

The code that you are using inside render is JSX , browsers as of now doesn't understand jsx . So we need transpilers to convert them to pure JavaScript .

You need to have a build process that transpiles your jsx code into javascript and then you should load that transpiled js in your HTML.

But if you just quickly want to play with react without setting up the build process , you can go here and do that manually every time and paste that inside render

React.createElement(
  'div',
  { className: 'static-modal' },
  React.createElement(
    Modal,
    { title: 'Modal title', bsStyle: 'primary', backdrop: false, animation: false, container: mountNode, onRequestHide: handleHide },
    React.createElement(
      'div',
      { className: 'modal-body' },
      'One fine body...'
    ),
    React.createElement(
      'div',
      { className: 'modal-footer' },
      React.createElement(
        Button,
        null,
        'Close'
      ),
      React.createElement(
        Button,
        { bsStyle: 'primary' },
        'Save changes'
      )
    )
  )
);