Untitled

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>
);