React-Native variable as component name

Question

I'm trying to build an App with react-native. I have multiple Classes and I want to display a class depending on a state.

let MyComponent = this.props.navigationState.routes[this.props.navigationState.index].component;

this gives me the string 'Scene1' (witch is the name of my Component)

After that I want to display the component like this

return <MyComponent />;

I'm getting the error:

Expected a component class, got [object Object].

If I display the component like this:

return <Scene1 />;

it actually displays my Component.

Does anybody know whats the difference between these two examples? I can't understand why a variable containing a string is not the same as just the string. Maybe I'm missing a very small detail but it I just don't know whats wrong here

EDIT: as requested my route

class Scene1 extends Component {

    render() {

        return(
            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow'}}>
                <Text>Scene1</Text>
                <View>
                    <Text onPress={ () => this.props.navigate({ type: 'push', key: 'scene2' })}>Go to Scene2</Text>
                </View>
            </View>
        );
    }

}

Answer 1

I found the same thing, i'm not sure exactly what rules the JSX parser is applying. I can tell you that this works:

<this.props.componentClass />