Calling `render` multiple times? Yes.

by mihaibirsan

HTML

<div id="app"></div>
<div id="portal"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

#portal {
  position: absolute;
  right: 20px;
  top: 20px;
}

p {
  margin: 8px 0;
}

button {
  font-weight: bold;
}

React

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0
    };
    this._portals = [];
  }
  
  pushState = () => {
  	this.setState({ count: this.state.count + 1 })
  }
  
  createPortal = () => {
    const div = document.createElement('div');
    document.querySelector('#portal').appendChild(div);
  	this._portals.push(
      React.createPortal(
      	<div>
          <p>Hello {this.props.name}</p>
          <p>Does it keep state? {this.state.count || "Not yet."}</p>
        </div>,
        div
      )
    )
  }
  
  render() {
    return <div>
      <p>Hello {this.props.name}</p>
      <p>Does it keep state? {this.state.count || "Not yet."}</p>
      <button onClick={this.pushState}>Push</button>
      <button onClick={this.createPortal}>Portal</button>
      {this._portals}
    </div>;
  }
}

setInterval(
  () => ReactDOM.render(
    <Hello name={Date.now()} />,
    document.getElementById('app')
  ),
  1000
)