React error message singleton (using portals)

ErrorMessage.js

import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'

const ErrorMessage = React.createClass({
  statics: {
    outletNode: null
  },

  propTypes: {
    message: React.PropTypes.string
  },

  componentDidMount() {
    if (ErrorMessage.outletNode == null) {
      ErrorMessage.outletNode = document.createElement('div')
      document.body.appendChild(ErrorMessage.outletNode)
    }

    this.updateMessage()
  },

  componentDidUpdate() {
    this.updateMessage()
  },

  updateMessage() {
    const { message } = this.props

    if (message) {
      render(
        <p className="error-message">{message}</p>,
        ErrorMessage.outletNode
      )
    } else {
      unmountComponentAtNode(ErrorMessage.outletNode)
    }
  },

  componentWillUnmount() {
    unmountComponentAtNode(ErrorMessage.outletNode)
  },

  render() {
    return null
  }
})

const ErrorToggler = React.createClass({
  getInitialState() {
    return {
      errorMessage: null
    }
  },

  render() {
    const { errorMessage } = this.state

    return (
      <div>
        <button onClick={() => this.setState({ errorMessage: this.props.showMessage })}>boom!</button>
        <button onClick={() => this.setState({ errorMessage: null })}>ok</button>
        <ErrorMessage message={errorMessage}/>
      </div>
    )
  }
})

render((
  <div>
    <ErrorToggler showMessage="boom1"/>
    <ErrorToggler showMessage="boom2"/>
  </div>
), document.getElementById('app'))