ReactDom render multiple elements spfx

Question

Let me start by saying I am working on my first webpart and learning react spfx. I am trying to render multiple elements using ReactDom.render. How do I render both the elements on the same .ts file? This is a multiscreen webpart which I have realized has only one .ts file running at the initiation.
//ReactDom.render(element, this.domElement);---This is for spfxcontext and oninit ReactDom.render(React.createElement(App), this.domElement);---This is for rendering the Reactrouter headers

How do I declare both in the .ts file? When I use one of them, my header is appearing but spfxcontext and context from init and props are not loading. And when I just use other one, only my list data is populating and my component in app is not loading. I want both of them to be shown when the webpart loads.

Below is the full code:

export default class MultiScreenWebPart extends BaseClientSideWebPart<IReactGetItemsWebPartProps> {
public onInit(): Promise < void> {
console.log("init is running");
return super.onInit().then(_ => {
  sp.setup( this.context);
});
  }
  public render(): void {
console.log("render is running");
const element: React.ReactElement<IReactGetItemsProps> = React.createElement(
  ReactGetItems,
  {
    description: this.properties.description,
    context: this.context
  }
);
//ReactDom.render(element, this.domElement);
ReactDom.render(React.createElement(App), this.domElement);

}

Here is my webpart structure.Link to my github proj. I have the .ts files of no use as they are not rendering when webpart is loading. Only the MultiscreenWebPart.ts is loading.

Answer 1

MultiScreenWebPart is your WebPart class which typically will render a single ReactJS component, but then that component can Render whatever you need. You currently have ReactGetItems as your primary component, and within that component class you are already rendering other React components such as Tabs, PeoplePicker and PrimaryButton.

Inside that ReactGetItems, at the top if you import { Header } from './Header' then you can use your custom <Header> component in the Render just like you are using other imported React components. Likewise for your Home, Product etc. components.