Render a component within another in React

When a state is changed, React triggers componentDidUpdate() method, and by then I do:

componentDidUpdate: function () {
  React.render(new SubmitButton, $('.uploader-submit').get(0));
}

As you saw, I'm rendering a SubmitButton when a specific state is changed, but my question is: is this the best behavior to get this feature done?

My scenario is: I'm uploading a photo. When the input[type=file] is changed, I create a new state property and then the componentDidUpdate() is triggered, invoking the SubmitButton.

This is my render() method:

render: function () {
  return (
    <div className="uploader">
      <header className="uploader-header">
        <div className="uploader-actions pull-left">
          <div className="uploader-submit"></div>
          <CancelButton router={this.props.router} />
        </div>

        <UploadButton callback={this.imageSelectedCallback} />
      </header>

      <Preview imageUri={this.state.imageUri} />
    </div>
  )
}

Couldn't I do something like the <Preview /> component? I mean, it is there, but something just appears when this.state.imageUri is different of null. This is the implementation of Preview:

var Preview = {
  render: function () {
    return (
      <img src={this.props.imageUri} />
    )
  }
};

module.exports = React.createClass(Preview);

Yes, I know — "Preview" is invisible by default because it is an image, but I want to know if there's another approach to reach what I want: to show something based on a state, using the render method.