Pfthb

I'm making a Calendar which consists of an header and calendar. The header is for picking the type of calendar; weekly or monthly.

I had to make a dummy component called CalendarPicker just so I can use a switch. Inline switch is what I think needed but jsx doesn't accept it.

Is there a better way to do this? Or another way to match strings to components?

 <CalendarController
 render=( type, onTypeClick ) => (
 <>
 <header>
 <p>header of agenda</p>
 <button onClick=onTypeClick("weekly")>weekly</button>
 <button onClick=onTypeClick("monthly")>monthly</button>
 </header>

 <CalendarPicker
 type=type
 render=type => 
 switch (this.props.type) 
 case "monthly":
 return <MonthlyCalendar />;
 case "weekly":
 return <WeeklyCalendar />;
 default:
 return <MonthlyCalendar />;
 
 
 />
 </>
 )
 />

This is what I did to achieve this. In my case there were around 50 components and according to the name in the string I had to render that component.

I created a file ComponentSelector.js which imports all the components.

ComponentSelector.js

export default const objComponents = 
 MonthlyCalendar : 
 LoadComponent: function () 
 return require('../../Modules/MonthlyCalendar ').default;
 
 ,
 WeeklyCalendar : 
 LoadComponent: function () 
 return require('../../Modules/WeeklyCalendar ').default;
 
 
 

Import it into your CalendarController component

 import objComponents from './ComponentSelector.js';

 render()
 var CalComp=objComponents[this.props.type].LoadComponent();
 return(<div>
 <header>
 <p>header of agenda</p>
 <button onClick=onTypeClick("weekly")>weekly</button>
 <button onClick=onTypeClick("monthly")>monthly</button>
 </header>
 <CalComp type=type/>
 </div>)