Draft.js Editor Component isn't editable

Question

Trying to learn how to use the DraftJS React component in my own applications, and I have a big issue. I've followed the example located here.

I've used create-react-app to get the base boilerplate, and I've imported the Editor and state objects, and implemented like the example.

import React, { Component } from 'react';
import {Editor, EditorState} from 'draft-js';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <div className='container'>
      <h2> Welcome to the editor</h2>
      <Editor 
         editorState={this.state.editorState} 
         onChange={this.onChange} 
         placeholder='Make Something Great.' />
      </div>
    );
  }
}

export default App;

This issue is that it's displaying the H1, and the editor with placeholder text, but it simply won't allow me to change the contents of the editor.

I'm pretty sure I'm missing something. What do I need to do to enable editing?

UPDATE: It turns out that it was in fact editable, I just had to click just below the placeholder. Odd but okay.

Answer 1

This is happening because the Draft.css isn't included.

Final component should look like this:

import React, { Component } from 'react';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';


class App extends Component {
  constructor(props){
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <div className='container'>
      <h2> Welcome to the editor</h2>
      <Editor 
          editorState={this.state.editorState}
          onChange={this.onChange} 
          placeholder='Make Something Great.' />
      </div>
    );
  }
}

export default App;