title: CKEditor 5 and ReactJS: I can't edit the toolbar
body: <p>I'm reading the documentation (<a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html" rel="nofollow noreferrer">link</a>) but I'm not sure about how to edit the toolbar. This is the editor component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import CKEditor from '@ckeditor/ckeditor5-react';
  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  
  class EditorComponent extends Component {
      constructor(props) {
  
        super(props);
  
        this.state = {
          id: props.id,
          content: props.content,
          handleWYSIWYGInput: props.handleWYSIWYGInput,
          editor: ClassicEditor
        }
  
      }
  
      render() {
          return (
              &lt;div className="Editor-content"&gt;
                  &lt;CKEditor
                      editor={ this.state.editor }
                      data={this.state.content}
                      onInit={ editor =&gt; {
                          // You can store the "editor" and use when it is needed.
                          console.log( 'Editor is ready to use!', editor );
                      } }
                      onChange={ ( event, editor ) =&gt; {
                          const data = editor.getData();
                          this.state.handleWYSIWYGInput(this.props.id, data);
                          console.log( { event, editor, data } );
                          console.log(this.state.content);
                      } }
                      onBlur={ editor =&gt; {
                          console.log( 'Blur.', editor );
                      } }
                      onFocus={ editor =&gt; {
                          console.log( 'Focus.', editor );
                      } }
                  /&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default EditorComponent;
  </code></pre>
  
  <p>I tried to use the code provided in the link in <code>componentDidMount</code>, but this error appears <code>TypeError: "can't convert null to object"</code></p>
  
  <pre><code>componentDidMount() {
    this.state.editor
    .create( document.querySelector( '#editor' ), {
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
            ]
        }
    } )
    .catch( error =&gt; {
        console.log( error );
    } );
  }
  </code></pre>
  
  <p>Where am I supposed to use the code provided in the documentation in order to customize the toolbar?</p>