Using 'componentDidUpdate` to render component in separate div

second.js

import React from 'react';
import ReactDOM from 'react-dom';

const Letter = React.createClass({
  render() {
	  return (
      // same html stuff ...
	  )
  } 
});

var CapitalAButton = React.createClass({
  getInitialState: function(){
	  return { showCapitalA: false  };
  },

  componentDidUpdate: function(prevProps, prevState){
	  prevState.showCapitalA? ReactDOM.unmountComponentAtNode(document.querySelector("#letter")) : ReactDOM.render(<Letter />, document.querySelector('#letter'));
  },

  toggleCapitalA: function(){
	  this.state.showCapitalA? this.setState({showCapitalA: false}) : this.setState({showCapitalA: true})
  },
  
  render: function() {
	    return (
	      <div id="capital-button" onClick={this.toggleCapitalA}>
	      A
	      </div>
	    )
    }
});

var ButtonChoices = React.createClass({
  render: function() {
	  return (
	    <CapitalAButton />
	  )
  }
});

ReactDOM.render(
    <div id="a">
    <ButtonChoices />
    </div>,
    document.querySelector('#button-group')
);