Не отображает компонент в react js

пытаюсь вывести компонент через алерт по нажатии кнопки, но что-то не получается, что же делать?

function Mailbox(props) {
    const unreadmessages = props.unreadmessages;
    <div>
        {unreadmessages.length > 0 &&
            <h1>У вас {unreadmessages.length} непрочитанных</h1>
        }
        {unreadmessages.length <= 0 &&
            <h1>У вас нет непрочитанных сообщений</h1>
        }
    </div>
}
const messages = [];
const mailbox = <Mailbox unreadmessages={messages} />;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.showMessages = this.showMessages.bind(this);
    }

    showMessages() {
        alert(mailbox);
    }
    render() {
        return(
        <button onClick={this.showMessages}>Посмотреть все сообщения</button>
        );
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
    );