Can I get a function to have a return type that is a React Component which will be the component JSX output. For this code I am trying to get renderView to return Filters so the component would have to return the JSX <Filters/>.

Not very useful to return only filters but later I will modify the function to return components that implement a class SidebarView if return types with Components is doable with React. I’m new to React and Typescript so I’m not sure this is how React should be used either.

function renderView(activeComponent: string): JSXElement<Filters> {  
  switch (activeComponent) {
    case 'filters':        
      return <Filters/>
    .. other cases later that will be other components
    default:
      return <Filters/>;
    }
  }
}

JSX

return (
  <div className="sidebar">
    <div className="panel-container">
      <div className="sidebar-top">
        <Navigation changeView={updateViewState} />
      </div>
      <div className="sidebar-content">
        {renderView(activeComponent)}
      </div>
    </div>
  </div>
);

I haven’t been able to find anything in the React docs and my Typescript knowledge is very limited so I don’t know how to do this.