Custom toolbar doesn't work with SSR

[collinpage]

A custom toolbar with SSR doesn't work at all. If you remove it, everything works fine.

You can see here: https://codesandbox.io/s/react-ssr-with-express-h766l?fontsize=14

I forked an SSR sandbox and didn't strip it down but you can find the editor here: src/app/ThemeOne/Home.js

The goal here is to translate the dropdowns. I've tried to use buttons instead of dropdowns (for headings and sizes). I had to add an image for H3 and up but it works great for headings. Sizes doesn't work at all so I'm stuck.

[adwnm]

I had to move <CustomToolbar /> outside render function:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { compose } from 'recompose';
import ReactQuill from 'react-quill';

import HtmlPage from '../../common/components/ThemeOne/HtmlPage';

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      editorHtml: ''
    };
  }

  CustomToolbar = () => (
    <div id="wysiwygToolbar">
      <select className="ql-header" defaultValue={''} onChange={e => e.persist()}>
        <option value="1" />
        <option value="2" />
      </select>
      <button className="ql-bold" />
      <button className="ql-italic" />
      <select className="ql-color">
        <option value="red" />
        <option value="green" />
        <option value="blue" />
        <option value="orange" />
        <option value="violet" />
        <option value="#d0d1d2" />
      </select>
    </div>
  );

  handleChange = html => {
    this.setState({ editorHtml: html }, () => {
      console.log('editorHtml:', this.state.editorHtml);
    });
  };

  render() {
    const { CustomToolbar } = this;
    const modules = {
      toolbar: {
        container: '#wysiwygToolbar'
      }
    };

    const formats = [
      'header',
      'font',
      'size',
      'bold',
      'italic',
      'underline',
      'strike',
      'blockquote',
      'list',
      'bullet',
      'indent',
      'link',
      'image',
      'color'
    ];

    return (
      <HtmlPage>
        <div>
          <CustomToolbar />
          <ReactQuill onChange={this.handleChange} modules={modules} formats={formats} />
        </div>
      </HtmlPage>
    );
  }
}

const mapStateToProps = ({ propertie, app }) => {
  return { ...propertie, ...app };
};

const mapDispatchToProps = {};

export default compose(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(Home);