I am new to reactjs and I am developing a web app that displays conditional content within a single page. Can I use multiple return statements that each return a separate class component? Currently this is working. But I would like to understand if this could run into any problem when compared to using a router to redirect.

This is my code: myComponent.js:

import React, { Component } from "react";
import component1 from './component1'
import component2 from './component2'

class myComponent extends Component{
    constructor(props) {
        super(props); 

        this.state = {
            present: false
        }
    };

render(){
    if(this.state.present == false){ 
        return(<component1/>);
        }
    else{
        return(<component2/>);
        }
    }
}

Previously I was using the ternary operator to render the elements conditionally. I would like to understand in general if there would be any unwanted effects if I use conditional operator or multiple returns during rendering.