ボタンのクリック時にコンポーネントがレンダリングされない - ReactJS

私は現在、反応アプリケーションに取り組んでいます。ボタン付きのトップバーがあり、Registrationコンポーネントを onClick 関数にレンダリングしたいと考えています。以下の出力はありません。ここで何かが足りないのですか?

'use strict'

import React from 'react'
import Registration from 'Registration'


export default class Header extends React.Component {
  constructor (props) {
    super (props)
    this.handleClick = this.handleClick.bind(this)
  }


  handleClick () {
    <Registration />
  }

  render () {
    return (
      <div className='top-bar'>
        <div className='top-bar-left'>
          <ul className='menu'>
            <li className='menu-text'>SIS App</li>
            <li>
              <button className='button' type='button' onClick={this.handleClick}>Create Info</button>
            </li>
          </ul>
        </div>
      </div
    )
  }
}

これが私の登録コンポーネントです。

'use strict'

import React, {Component} from 'react'

export default class Registration extends Component {
  render () {
    let props = this.props
    let {edit} = props
    let handleChange = props.handleChange()
    return (
      <fieldset>
        <legend>Registration</legend>
        <input name='name'
               value={props['name']}
               type='text'
               placeholder='Your Name'
               onChange={handleChange}
        />
        <input name='email'
               value={props['email']}
               type='email'
               placeholder='Email'
               onChange={handleChange}
        />
        <input name='phone'
               value={props['phone']}
               type='tel'
               pattern={PhoneNumberPattern}
               placeholder='Phone'
               onChange={handleChange}
        />
      </fieldset>
    )
  }
}

そして私の app.js:

'use strict'

import React from 'react'
import { render } from 'react-dom'
import Header from 'Header'

render(
  <div>
    <Header />
  </div>,
  document.getElementById('app')
)