App.js

import React, { ReactDOM, Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Ideogram from 'ideogram';

import ReactIdeogram from './react-ideogram.js'

class App extends Component {

  constructor() {
      super();

      this.state = {
              organism: 'mouse',
              showBandLabels: false,
              orientation: 'vertical',
              container: '#ideogram-container',
              // dataDir: './ideogram/data/bands/native/'                                                                 
              dataDir: 'https://unpkg.com/ideogram@1.3.0/dist/data/bands/native/'
      };
  }

  clearDiv = () => {
    let container = document.getElementById('ideogram-container');

    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }

    console.log('cleared container', container, container.hasChildNodes());
  }

  drawIdeo = (organismType) => {
    this.clearDiv();

    var config = {
        organism: 'mouse',
        // orientation: 'horizontal',                                                                                     
        showBandLabels: true,
        container: '#ideogram-container'
    };

    if (organismType === 'human') {
        config = {
            container: '#ideogram-container',
            organism: 'human'
        };
    }

    setTimeout(function() {
        new Ideogram(config);
    }, 100);
  }

  render() {
    return (
      <div className="App">
            <h4>state: {JSON.stringify(this.state)}</h4>

            <p>Change component state (React way)</p>
            <button onClick={e => this.setState({organism: 'mouse'})}>Mouse</button>
            <button onClick={e => this.setState({organism: 'human'})}>Human</button>
            <button onClick={e => this.setState({orientation: 'vertical'})}>Vert</button>
            <button onClick={e => this.setState({orientation: 'horizontal'})}>Horiz</button>
            <button onClick={e => this.setState({showBandLabels: true})}>Bands</button>
            <button onClick={e => this.setState({showBandLabels: false})}>No Bands</button>

            <p>Redraw without state change (vanilla JS way)</p>
            <button onClick={e => this.clearDiv()}>Clear</button>
            <button onClick={e => this.drawIdeo('mouse')}>Draw Mouse</button>
            <button onClick={e => this.drawIdeo('human')}>Draw Human</button>

            <ReactIdeogram config={this.state} />
      </div>
    );
  }
}

export default App;