Conditional Rendering in React application using tsx

Question

I am trying to render a view to the user based on the state they are in a React application using the default React template that Microsoft provides.

Here is the error I am getting:

picture of error

Here is my code:

import * as React from 'react'; import { RouteComponentProps } from 'react-router'; import { NextButton } from './shared/NextButton' import { StationZero } from './stations/StationZero'; interface BiodieselStudioState { station: string[]; stationNumber: number; } export class BiodieselStudio extends React.Component<RouteComponentProps<{}>, BiodieselStudioState> { constructor() { super(); this.state = { station: ["StationZero", "StationOne", "StationTwo", "StationThree", "StationFour", "StationFive", "StationSix", "StationSeven"], stationNumber: 0 }; } public render() { return ( <div> <h1>BIODIESEL STUDIO!</h1> { this.chooseStation(this.state.stationNumber) } <NextButton /> </div> ); } chooseStation(stationNumber: number) { switch(stationNumber) { case 0: { return <StationZero /> break; } case 1: { break; } case 2: { break; } case 3: { break; } case 4: { break; } case 5: { break; } case 6: { break; } case 7: { break; } case 8: { break; } default: { } } } 

I have to load in very different user interfaces, but this is basically the host for the station views and the idea is that the child components will have the user complete an activity and update the state in BiodieselStudio which will make it so that the app works as needed.

A lot of the case statements aren't filled out but it will follow the same pattern!

Huge thanks in advance you guys!

Answer 1

According to the error your StationZero component has RouteComponentProps<{}> defined for its props

i.e.

class StationZero extends React.Component<RouteComponentProps<{}>> { 

But you're not passing it RouteComponentProps since you're not mounting the component via react-router.

You can fix this error by removing RouteComponentProps<{}> from the StationZero component definition:

class StationZero extends React.Component { 

Also remove this break to fix the 'unreachable code' error.

case 0: { return <StationZero /> break; // not reachable because of return }