Change content in div based on logic using React - reactjs

Question

I'm failing to understand how to update the content inside my render function based on logic from inside of a function. Do I have to return a whole new render function in order to do so? If so, that seems counter intuitive with React's framework of state & props and such...
Here's what I've tried:
tick() {
this.setState(prevState => ({
minutes: prevState.seconds + 1,
}));
if(this.state.minutes > this.state.targetGoal){
console.log("NONONONONO");
return (<div>SOMETHING NEW</div>); //update content inside render()
}
}
async componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div style={divStyle}>
<div>Your Second Count: {this.state.seconds}</div>
<habitlab-logo-v2></habitlab-logo-v2>
<br/>
<close-tab-button></close-tab-button>
</div>
);
}
}

Answer 1

There are a few issues.
As #Jayce444 has pointed out, you need to change a state to trigger render to re-render.
So create a new flag (say isOvertime) to trigger the render to fire.
tick() {
this.setState(
prevState => ({
seconds: prevState.seconds + 1
}),
() => {
if (this.state.seconds > this.state.targetGoal) {
console.log("NONONONONO");
// return <div>SOMETHING NEW</div>; //update content inside render()
this.setState({ isOvertime: true });
}
}
);
}
And in the render, you show a component depending on the isOvertime.
render() {
const { isOvertime, seconds } = this.state;
return (
<div>
{isOvertime ? (
<div>Time Over Man!</div>
) : (
<div>Your Second Count: {seconds}</div>
)}
<input
type="number"
value={this.state.targetGoal}
onChange={e => this.setState({ targetGoal: e.target.value })}
/>
</div>
);
}
Here is the full source. (demo availabe on CodeSandBox).
Output
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
state = {
interval: 0,
seconds: 0,
targetGoal: 4,
isOvertime: false
};
tick() {
this.setState(
prevState => ({
seconds: prevState.seconds + 1
}),
() => {
if (this.state.seconds > this.state.targetGoal) {
console.log("NONONONONO");
// return <div>SOMETHING NEW</div>; //update content inside render()
this.setState({ isOvertime: true });
}
}
);
}
componentDidMount() {
const interval = setInterval(() => this.tick(), 1000);
this.setState({ interval });
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
const { isOvertime, seconds } = this.state;
return (
<div>
{isOvertime ? (
<div>Time Over Man!</div>
) : (
<div>Your Second Count: {seconds}</div>
)}
<input
type="number"
value={this.state.targetGoal}
onChange={e => this.setState({ targetGoal: e.target.value })}
/>
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);