I'm not sure exactly what you are trying to do, but here is a functional timer where when it reset you can see that time run out, and when they submit it resets the timer and tells you what the value of the timer was:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
// Example stateless functional component
const Example = props => {
const [countdown, setCountdown] = React.useState(5);
React.useEffect(() => {
const timeout = setTimeout(() => {
if (countdown === 0) {
console.log('Time up, next question');
}
setCountdown(countdown ? countdown - 1 : 5);
}, 1000);
return () => {
clearTimeout(timeout);
}
}, [countdown]);
const submit = () => {
console.log(`Timer was at ${countdown}`);
setCountdown(5);
};
return (<div><button onClick={submit}>Submit</button> {countdown}</div>)
}
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="react"/>
<!-- end snippet -->
React circa 2020
----------------
In the `onClick` callback, call the [state hook's][1] setter function to update the state and re-render:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const Search = () => {
const [showResults, setShowResults] = React.useState(false)
const onClick = () => setShowResults(true)
return (
<div>
<input type="submit" value="Search" onClick={onClick} />
{ showResults ? <Results /> : null }
</div>
)
}
const Results = () => (
<div id="results" className="search-results">
Some Results
</div>
)
ReactDOM.render(<Search />, document.querySelector("#container"))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][2]
React circa 2014
----------------
The key is to update the state of the component in the click handler using `setState`. When the state changes get applied, the `render` method gets called again with the new state:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.onClick} />
{ this.state.showResults ? <Results /> : null }
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
ReactDOM.render( <Search /> , document.getElementById('container'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][3]
[1]: https://reactjs.org/docs/hooks-state.html
[2]: https://jsfiddle.net/khx30pnv/
[3]: http://jsfiddle.net/kb3gN/15084/
