rails-react-browserify-example icon indicating copy to clipboard operation
rails-react-browserify-example copied to clipboard

Doesn't seem to work with other npm modules

Open avk opened this issue 10 years ago • 0 comments

How would you integrate another npm module, such as react-wysiwyg, into this example project?

  1. npm install react-wysiwyg
  2. Use it in header.js.jsx:
var ContentEditable = require('react-wysiwyg');

var Header = React.createClass({
  propTypes: {
    name: React.PropTypes.string
  },

  getInitialState: function(){
    return {
      html: 'default text',
      placeholder: false,
      editing: false
    };
  },

  onChange: function(textContent, setPlaceholder) {
    if (setPlaceholder) {
      this.setState({
        placeholder: true,
        html: ''
      });
    } else {
      this.setState({
        placeholder: false,
        html: textContent
      });
    }
  },

  enableEditing: function(){
    // set your contenteditable field into editing mode.
    this.setState({ editing: true });
  },

  render: function() {
    return (
      <div>
        <ContentEditable
          tagName='div'
          onChange={this.onChange}
          html={this.state.html}
          preventStyling
          noLinebreaks
          placeholder={this.state.placeholder}
          placeholderText='Your Name'
          editing={this.state.editing}
        />
        <button onClick={this.enableEditing}>
          Enable Editing
        </button>
        <h1>Hello, {this.props.name}!</h1>
      </div>
    );
  }
});

module.exports = Header;

React refuses to mount the component with the following 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

Pulling out the require line and the <ContentEditable> tag makes the component load again. What am I missing?

avk avatar Dec 16 '15 17:12 avk