rails-react-browserify-example
rails-react-browserify-example copied to clipboard
Doesn't seem to work with other npm modules
How would you integrate another npm module, such as react-wysiwyg, into this example project?
-
npm install react-wysiwyg - 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?