Tengo un componente de reacción que se muestra a continuación y estoy tratando de renderizar condicionalmente algunos componentes. El objetivo es que cuando la sesión actual sea un host, la función AppropriatePage debería devolver el componente HostWorkflow, sin embargo, me encuentro con el TypeError no detectado.

Me referí a esto para hacer esto.

 export default class HostPage extends Component { constructor(props) { super(props); this.state = { participants: 0, questions: 0, host: true, session_id: -1, }; this.session_code = this.props.match.params.session_code; } HostWorkflow() { return (<Grid container spacing={1}> <Grid item xs={12} align="left"> <Button color='secondary' onClick={this.handleEndSession}>End Session</Button> </Grid> <Grid item xs={4} align="left"> <p>SESSION {this.session_code}</p> </Grid> <Grid item xs={4} align="center"> <p>PARTICIPANTS {this.state.participants}</p> </Grid> <Grid item xs={4} align="right"> <p>QUESTIONS {this.state.questions}</p> </Grid> </Grid>); } AppropriatePage(props) { const is_host = props.host; if (is_host) { console.log("TEST MY IF"); return (<this.HostWorkflow />); } return <p>NOT HOST</p>; } render() { return (<this.AppropriatePage host={this.state.host} />); } }