Element besides another - reactjs

Question

I am trying to display the time next to the text "Market Data" at the top header of the homepage. Tick is defined by the tick function below. The interval is set to one second.
The text "Market Data" gets displayed fine, but the time is not there.
var HomePage = React.createClass({
getInitialState: function() {
setInterval(this.tick, 1000);
},
tick : function() {
const element = (
<div>
<h1>{new Date().toLocaleTimeString()}.</h1>
</div>
},
render: function () {
return (
<div>
<div className="row">
<center>{this.tick}</center>
<center><p style={{ color:'blue', fontSize:'25px', fontWeight:'bold'}}>Market Data</p></center>
<StockTable stocks={this.state.stocks} last={this.state.last} />
</div>
</div>
);
}
});
React.render(<HomePage />, document.getElementById('main'));

Answer 1

I have similar code running. You need to trigger the component to update every tick, you'll do this by setting a new state after the timer. Setting a state triggers the component to update, but before you do, you remove the timer using componentWillUnmount(). When the updated component mounts, componentDidMount() will trigger and you set a new timer. It's something like an infinite cycle where each action triggers the next. Here's the code I'm using, it uses ES6 so you'll have to adapt it a bit.
constructor(props) {
super(props);
this.state = {
time: 0
};
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.state = { time:new Date() }
//The action you want to execute at every tick.
}
render(){
return(
<div>The time: {this.state.time}</div>
);
}
Here's the official explanation for this from React documentation. https://facebook.github.io/react/docs/state-and-lifecycle.html

Answer 2

Do this and you are good to go. The idea is that React updates the component when you change the state of the component. So, on certain interval, you are changing the state which leads to React rendering the change which is new time.
var HomePage = React.createClass({
componentWillMount: function(){
this.state = {
timeNow: new Date().toLocaleTimeString()
}
},
componentDidMount: function() {
this.timer = setInterval(this.tick.bind(this), 1000);
},
componentWillUnmount() {
clearInterval(this.timer);
},
tick : function() {
this.setState({
timeNow: new Date().toLocaleTimeString()
})
},
render: function () {
return (
<div>
<div className="row">
<center>
<div>
<h1>{this.state.timeNow}</h1>
</div>
</center>
<center><p style={{ color:'blue', fontSize:'25px', fontWeight:'bold'}}>Market Data</p></center>
</div>
</div>
);
}
});
React.render(<HomePage />, document.getElementById('main'));
Working example: https://jsfiddle.net/69z2wepo/73851/