Re-render server side content with react and node.js

I have successfully set up an node.js app with react. No i already know that i have to render the content on the client-side after i have rendered it on the server-side. I want to use moment.js on the server side to provide a date. But if i rerender on the client side it gets deleted.

My code on the server side look like this

import React from 'react';
import helper from './helper/helper'

let Element = React.createClass({
    render: function() {
        return (
            <td className="line" key={this.props.id}>
                <span className="time">
                    <span>{this.props.from}</span>
                    <span>-</span>
                    <span>{this.props.to}</span>
                </span>
            </td>
        );
    }
});

let Nav = React.createClass({
    render: function(){
        let day = helper.date.getDay(); //function to give me a Date like 01.01.2017
        return (
            <div className="nav">
                <div className="arrow"><i className="fa fa-caret-left"/></div>
                <div className="date"><div>{day}</div></div>
                <div className="arrow"><i className="fa fa-caret-right"/></div>
            </div>
        );
    }
});

let Day = React.createClass({
    render: function(){
        let lines = [];
        for(let i = 6; i < 23; i++){
            let from = i;
            let to = i + 1;
            lines.push(
                <Element from={from} to={to} key={i}/>
            );
        }
        return (
        <div id="day">
            <Nav/>
            <table>
                <tbody>
                <tr>{lines}</tr>
                </tbody>
            </table>
        </div>
        );
    }
});

export default Day

On the client side i want to rerender it and a a onclick function.

let Element = React.createClass({
    render: function() {
        return (
            <td className="line" key={this.props.id}>
                <span className="time" onClick={this.props.shout}>
                    <span>{this.props.from}</span>
                    <span>-</span>
                    <span>{this.props.to}</span>
                </span>
            </td>
        );
    }
});

let Nav = React.createClass({
    render: function(){
        return (
            <div className="nav">
                <div className="arrow"><i className="fa fa-caret-left"/></div>
                <div className="date"></div>
                <div className="arrow"><i className="fa fa-caret-right"/></div>
            </div>
        );
    }
});

let Day = React.createClass({
    shout(){
        return function(){
            alert('shout');
        }
    },
    render(){
        let lines = [];
        for(let i = 6; i < 23; i++){
            let from = i;
            let to = i + 1;
            lines.push(
                <Element shout={this.shout()} from={from} to={to} key={i}/>
            );
        }
        return (
            <div id="day">
                <Nav/>
                <table>
                    <tbody>
                    <tr>{lines}</tr>
                    </tbody>
                </table>
            </div>
        );
    }
});

$(document).ready(function(){
    ReactDOM.render(
        <Day />,
        document.querySelector('#root')
    );
});

My on click function is working but my date is deleted with an error message that react could not render it as the content is different. How can i render my html on the server-side and than reuse it on the client to a handleactions? I thought ReactDOM.render doesn't delete already existing content like my date. Where am i wrong?

via Silve2611