Untitled
unknown
tsx
2 years ago
2.0 kB
7
Indexable
type ComponentVariants = "input" | "select" | "checkbox"; type InputType = { cat: string }; type SelectType = { dog: string }; type CheckboxType = { fish: string }; type ComponentInput = { typeElement: "input"; elementsProps: InputType; }; type ComponentSelect = { typeElement: "select"; elementsProps: SelectType; }; type ComponentCheckbox = { typeElement: "checkbox"; elementsProps: CheckboxType; }; type ComponentsListType = { id: string; } & (ComponentInput | ComponentSelect | ComponentCheckbox); type OnlyElementsProps = ComponentsListType["elementsProps"]; const GetComponent = ({ variant, componentsProps, }: { variant: ComponentVariants; componentsProps: OnlyElementsProps; }) => { switch (variant) { case "input": return <Input {...componentsProps} />; //here i have error case "checkbox": return <Checkbox {...componentsProps} />; case "select": return <Select {...componentsProps} />; default: return <div> null </div>; } }; const Input = ({ cat }: InputType) => <div>Input - {cat} </div>; const Select = ({ dog }: SelectType) => <div>Select - {dog} </div>; const Checkbox = ({ fish }: CheckboxType) => <div>Checkbox - {fish} </div>; //usage const componentsList: ComponentsListType[] = [ { id: "1", typeElement: "input", elementsProps: { cat: "fpo" }, }, { id: "2", typeElement: "input", elementsProps: { cat: "some" }, }, { id: "3", typeElement: "select", elementsProps: { dog: "ipsum" }, }, { id: "4", typeElement: "checkbox", elementsProps: { fish: "lorem" }, }, { id: "5", typeElement: "select", elementsProps: { dog: "muspi" }, }, ]; const GenerateComponents = () => ( <div> {componentsList.map((component) => ( <GetComponent variant={component.typeElement} componentsProps={component.elementsProps} /> ))} </div> );
Editor is loading...