Reveal.js slide does not show

[Nokama4]

I have an issue with Reveal.js. When I load for the first time a slide collection, there is no problem, the first and the following slide show. But when I close my slides and come again on this collection or another one, no slide shows. I work with React js, here is my code in the reveal component:

 * Npm import
 */
import React from 'react';
import PropTypes from 'prop-types';
import Reveal from 'reveal.js';
import { get } from 'axios';
import hljs from 'highlight.js';


/*
 * Local import
 */
import { settings, initialState } from './config';

// Stupid old schoold JS, but fuck.
window.Reveal = Reveal;


/*
 * Component
 */
export default class ReactReveal extends React.Component {
  /*
   * PropTypes
   */
  static propTypes = {
    // CSS
    id: PropTypes.string,
    className: PropTypes.string,

    // Redux
    url: PropTypes.string.isRequired,
    state: PropTypes.object,
    synced: PropTypes.bool,
    notify: PropTypes.bool,
    actions: PropTypes.objectOf(PropTypes.func.isRequired),
    active: PropTypes.bool.isRequired,
  }


  /*
   * State
   */
  state = {
    loaded: false,
  }


  /*
   * Lifecycles
   */
  componentWillMount() {
    this.load(this.props.url);
  }

  componentWillReceiveProps(nextProps) {
    const { url, state, synced } = nextProps;

    // New `url` prop => load url
    if (this.props.url !== url) {
      this.load(url);
      return;
    }

    // Update Reveal state if we are synced
    if (synced && state) {
      Reveal.setState(state);
    }
  }

  componentDidUpdate(prevProps, prevState) {
    // A deck has been loaded => init Reveal
    if (this.state.loaded && !prevState.loaded) {
      Reveal.initialize(settings);
      Reveal.setState(initialState);
      Reveal.addEventListener('slidechanged', this.notify);
      Reveal.addEventListener('fragmentshown', this.notify);
      Reveal.addEventListener('fragmenthidden', this.notify);
      Reveal.addEventListener('ready', this.highlight);
    }
    // Fix #366
    if (!prevProps.active && this.props.active) {
      window.dispatchEvent(new Event('resize'));
    }
  }

  componentWillUnmount() {
    if (this.state.loaded) {
      Reveal.removeEventListener('slidechanged', this.notify);
      Reveal.removeEventListener('fragmentshown', this.notify);
      Reveal.removeEventListener('fragmenthidden', this.notify);
      Reveal.removeEventListener('ready', this.highlight);
    }
  }


  /*
   * Actions
   */
  load = (url) => {
    get(url)
      .then(this.mount)
      .catch(this.mountError);
  }

  mount = ({ data }) => {
    // Inject Reveal slides
    this.innerHtml = { __html: data };

    // Update component
    this.setState({ loaded: true, error: false }, () => {
      // Update Reveal state if we are synced
      const { state, synced } = this.props;
      if (synced && state) {
        Reveal.setState(state);
      }
    });
  }

  mountError = (error) => {
    console.error(error);
    this.setState({
      loaded: false,
      error: true,
    });
  }


  /*
   * Handlers
   */
  notify = () => {
    const { actions, notify } = this.props;
    if (notify) {
      const state = Reveal.getState();
      actions.notifySlide(state);
    }
  }

  highlight() {
    hljs.initHighlighting.called = false;
    hljs.initHighlighting();
  }


  /*
   * Render
   */
  render() {
    // Vars
    const { id, className } = this.props;
    const attrs = {};

    // Id;
    if (id) {
      attrs.id = id;
    }

    // Class
    const classNames = ['reveal'];
    if (className) {
      classNames.push(className);
    }
    attrs.className = classNames.join(' ');
    console.log(attrs);
    return (
      <div {...attrs}>
        {this.state.loaded &&
          <div
            className="slides"
            dangerouslySetInnerHTML={this.innerHtml}
          />
        }
        {this.state.error &&
          <div className="utils-flexcenter">
            <div className="utils-flexcenter-child">
              <div>Error: The requested slides failed to load.</div>
              <div>URL: {this.props.url}</div>
            </div>
          </div>
        }
      </div>
    );
  }
}

It seems that the reveal style does not apply in my second try. No present or future classes are applied either. The initialState and settings are the ones Reveal.js preconizes.

indexh: 0,
  indexv: 0,
  indexf: 0,
  paused: false,
  overview: false,
};
const Settings = {
  progress: true,
  center: true,
  slideNumber: true,
  embedded: true,
  width: 900,
  height: '100%',
  minScale: 0.7,
  maxScale: 1,
  transition: 'slide',
  controls: true,
  overview: true,
  help: true,
};

Do you have an idea why?

[bnjmnt4n]

Not too sure as reveal wasn't meant to be embedded like that, but you can try running Reveal.sync() to sync the DOM to the slides.

[mozgbrasil]

Hello good afternoon

I'm having trouble integrating the library with React, can you help me please

Following is an example where we see that the slide is not showing

https://codesandbox.io/s/4rxkmr7k3x

[ghost]

https://codesandbox.io/s/4rxkmr7k3x
give height to main container

[aditya-m-shah]

@jagadishreddykovvuri - Adding a height helped.

**

**

Slide 1

Slide 2