CODEWITHSUNDEEP
reactjsreact-nativewebstorm
Amrmsmb
Amrmsmb

Reputation: 1

Button tag is not defined

I am trying to create a button in React js. I am using WebStorm. When I add the below posted code and run it, I get the below posted errors.

Please let me know how to fix it.

code:

var React = require('react');

var buttonStyle = {
margin: '10px 10px 10px 0'
};

var Button = React.createClass({
render: function () {
    return (
        <button
            className="btn btn-default"
            style={buttonStyle}
            onClick={this.props.handleClick}>{this.props.label}</button>
    );
}
});

error:

          <button
        ^
SyntaxError: Unexpected token <
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)

Upvotes: 0

Views: 400

Answers (2)

A. Backhagen
A. Backhagen

Reputation: 1407

If you want to use this button somewhere else the best practice is to export it as default and then import it where you want to use it.

import React from 'react';

var buttonStyle = {
margin: '10px 10px 10px 0'
};

var Button = React.createClass({
  render() {
      return (
          <button
              className="btn btn-default"
              style={buttonStyle}
              onClick={this.props.handleClick}>{this.props.label}</button>
      );
  }
});
export default Button;

When you want to use it next you import it as a module:

import Button from 'pathToComponent/Button'

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

I dont know which react version are you using.

I tried like this and working for me well.

import createReactClass from  'create-react-class';

var Button = createReactClass({
   handleClick: function() {
      console.log("hello world");
  },
  render: function () {
    return (
      <button
        className="btn btn-default"
        style={buttonStyle}
        onClick={this.handleClick}>{'Button'}</button>
    );
  }
});

Working codesandbox

Upvotes: 1

Related Questions