I'm still learning the basics of React, and I wanted to do something that caught my attention. It's about rendering two things. Is it possible or even plausible to just change what is rendered with a function, and then calling the functions separately with a button or timer?
This is a sample code, to show how it would render two completely different things. It is supposed to render a button that says "State: On" or "State: Off". And when you click the button the state changes. But also, the whole render method is switched... or at least that's what's supposed to be happening.
class Flicker{ constructor(props){ super(props); this.state = {mode: "on"}; } flipOn(){ this.setState({mode: "on"}) } flipOff(){ this.setState({mode: "off"}) } if (this.state.mode == "on"){ render() { return(<button onClick={this.flipOn}>State: On</button> ); } } else if (this.state.mode == "off"){ render() { return(<button onClick={this.flipOff}>State: Off</button> ); } }}export default Flicker;If this isn't the correct way to do this type of changes in what jsx gets rendered on the app, how should it be done?