CODEWITHSUNDEEP
reactjstypescript
Liero
Liero

Reputation: 27360

How to render react component determined by string in TSX

I want to achieve navigation based on hash change in url.

for example for url index.html#HomePage the app will load HomePage component.

import { HomePage } from '../components/homepage'
import { AnotherPage } from '../components/anoterpage'


export class NavigationFrame extends React.Component<any, State> {
    constructor(props) {
        super(props);
        this.state = { pageName: this.pageNameFromUrl() };
    } 

    onHashTagChanged = () => {
       this.setState({pageName: this.pageNameFromUrl()});
    }


    public render() {
         var Page = this.state.pageName as any;
        return <Page /> //this renders <homepage /> when this.state.pageName = "HomePage";
   }
}

is there any way how to dynamically create component based on string?

Upvotes: 0

Views: 777

Answers (1)

Raja Sekar
Raja Sekar

Reputation: 2130

class CustomComponent extends React.Component{
  render(){
    return (
      var DynamicComponent = this.props.component;
      return <DynamicComponent />;
    )
  }
}

import it into your file and use like below,

 return (
      <CustomComponent component={this.state.pageName} />
 );

Upvotes: 2

Related Questions