Component isn't visible until first click

[jonasfrid]

Hi! I'm trying out this component, and everything works well except one thing: the Upload screen is hidden until I click / tap on it. Once I've clicked (in the general area that I know the component should be), it appears fine and I can drag files there / click to upload. I can't find any documentation about visibility settings, have I missed something? Code below:

import {Icon} from 'semantic-ui-react';
import ReactDOMServer from 'react-dom/server';
import DropzoneComponent from 'react-dropzone-component';
import 'react-dropzone-component/styles/filepicker.css';
import 'dropzone/dist/min/dropzone.min.css';

export class FileUpload extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {

    this.componentConfig = {
        iconFiletypes: ['.jpg', '.png'],
        showFiletypeIcon: true,
        multiple: false,
        postUrl: '/my-fancy-url'
    };

    this.djsConfig = {
        params: {
            name: 'testfile'
        },
        previewTemplate: ReactDOMServer.renderToStaticMarkup(
          <div className="dz-preview dz-file-preview">
            <div className="dz-details">
              <div className="dz-filename"><span data-dz-name="true"></span></div>
              <img data-dz-thumbnail="true" />
            </div>
            <div className="dz-progress"><span className="dz-upload" data-dz-uploadprogress="true"></span></div>
            <div className="dz-success-mark"><Icon size='large' name='check' color='olive'/></div>
            <div className="dz-error-mark"><Icon size='large' name='close' color='red'/></div>
            <div className="dz-error-message"><span data-dz-errormessage="true"></span></div>
          </div>
        )
    };

    // If you want to attach multiple callbacks, simply
    // create an array filled with all your callbacks.
    this.callbackArray = [() => console.log('Hi!'), () => console.log('Ho!')];

    // Simple callbacks work too, of course
    this.callback = () => console.log('Hello!');
  }
  render() {

    // For a list of all possible events (there are many), see README.md!
    const eventHandlers = {
        drop: this.callbackArray,
        addedfile: this.callback,
        init: () => {console.log('init')}
    }
    if (!this.componentConfig) return null;

    return (
      <DropzoneComponent
        config={this.componentConfig}
        eventHandlers={eventHandlers}
        djsConfig={this.djsConfig} >
      </DropzoneComponent>
    )
  }
}

[jonasfrid]

My bad. Realized that putting the config in componentDidMount leads to this. Putting it in the constructor works fine:

import {Icon} from 'semantic-ui-react';
import ReactDOMServer from 'react-dom/server';
import DropzoneComponent from 'react-dropzone-component';
import 'react-dropzone-component/styles/filepicker.css';
import 'dropzone/dist/min/dropzone.min.css';

export class FileUpload extends React.Component {
  constructor(props) {
    super(props);

    this.componentConfig = {
        iconFiletypes: ['.jpg', '.png'],
        showFiletypeIcon: true,
        multiple: false,
        postUrl: '/my-fancy-url'
    };

    this.djsConfig = {
        params: {
            name: 'testfile'
        },
        previewTemplate: ReactDOMServer.renderToStaticMarkup(
          <div className="dz-preview dz-file-preview">
            <div className="dz-details">
              <div className="dz-filename"><span data-dz-name="true"></span></div>
              <img data-dz-thumbnail="true" />
            </div>
            <div className="dz-progress"><span className="dz-upload" data-dz-uploadprogress="true"></span></div>
            <div className="dz-success-mark"><Icon size='large' name='check' color='olive'/></div>
            <div className="dz-error-mark"><Icon size='large' name='close' color='red'/></div>
            <div className="dz-error-message"><span data-dz-errormessage="true"></span></div>
          </div>
        )
    };

    // If you want to attach multiple callbacks, simply
    // create an array filled with all your callbacks.
    this.callbackArray = [() => console.log('Hi!'), () => console.log('Ho!')];

    // Simple callbacks work too, of course
    this.callback = () => console.log('Hello!');
  }
  render() {

    // For a list of all possible events (there are many), see README.md!
    const eventHandlers = {
        drop: this.callbackArray,
        addedfile: this.callback,
        init: () => {console.log('init')}
    }
    if (!this.componentConfig) return null;

    return (
      <DropzoneComponent
        config={this.componentConfig}
        eventHandlers={eventHandlers}
        djsConfig={this.djsConfig} >
      </DropzoneComponent>
    )
  }
}