How to assign a react component to a link?

Question

JavaScript

This is how it doesn't work -

store_changeHandler = (event)=>{
    var Component = this.props.store.view;
    this.setState({
        component: <Component />
    });
};

render() {
    return <div>{this.state.component}</div>;
}

And this is how it works -

store_changeHandler = (event)=>{
    this.setState({
        component: this.props.store.view
    });
};

render() {
    var Component = this.state.component;
    return <div>{<Component />}</div>;
}

Question - how to make the first option work? And why doesn't it work in the first case?

Answer 1

This is how it will work:

store_changeHandler (event) {
    var Component = this.props.store.view;
    this.setState({
        component: (<Component />) 
    });
};

render() {
    return <div>{this.state.component}</div>;
}

Full example here