How can I get a list of attributes (any /Type?/) from a tag that was passed as a string.
export const createElement = (Component: ElementType) => {
return ({...props }: any /*Type?*/) => (
<Component
{...props}
/>
);
};
const Some = () => {
const Textarea = createElement("textarea");
const Input = createElement("input");
return (
<>
<Textarea placeholder={"123"} type={"color"}/> {/*type={"color"} must be error*/}
<Input type={"color"} />
</>
)
}
I need that when I pass attributes they correspond to the tag that was passed
The key points here:
JSX.IntrinsicElementsis a special type that maps the names of the HTML elements to their properties type- An explicit call to
React.createElement()— or whatever the equivalent is, if your target is not React — is necessary to create an element from its name as a string, rather than a component function
Therefore, your createElement could look something like this:
import React from 'react';
export const createElement = <T extends keyof JSX.IntrinsicElements>(elementName: T) => {
return (props: JSX.IntrinsicElements[T]) => React.createElement(elementName, props);
};