How to create html element dynamically with props based on `as` on react (TypeScript)

Question

I want to create a, b, div or another element based on as={""} prop in my function.

I am checking as and then use if guards to create element one-by-one. But is there any way to create html element based on as component?

I want to be able to create b, a, h4 h3 or any element without if's

I've found similar question but it uses styled components. Is it possible to do it without it?

Currently im doing this:

import * as React from 'react'

interface Props {
  children: (React.ReactChild | React.ReactNode) | (React.ReactChild[] | React.ReactNode[])
  onClick?: (e) => void
  as?: string
}

const DynElement: React.FunctionComponent<Props> = props => {
  const { as , children } = props

  return (
  <>
    {as === 'div' && <div {...props_rest}>
      {children}
    </div>}
    {as === 'b' && <b {...props_rest}>
      {children}
    </b>}
    </>
  )
}

export default DynElement

and usage is:

<DynElement as="b" onClick={...}>...</DynElement>

Using TypeScript + React.

ray · Accepted Answer · 2020-03-14 11:49:43Z

2

Capture the as prop in an uppercase variable and use that as a JSX component:

const { as: Cmp = ‘div’, ...rest } = props;

return (
  <Cmp {...rest} />
);

No need to even pass children explicitly. It will be passed along with the ‘rest’ props.

edited Mar 14, 2020 at 11:49

answered Mar 14, 2020 at 11:11

ray

27.3k5 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dennis Over a year ago

This gave me errors on TypeScript. Perhaps will work for JSX but on TSX I get:

Type '{ children: string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ... 55 more ... | (ReactNode[] & ReactPortal); ... 8 more ...; as?: string; }' has no properties in common with type 'IntrinsicAttributes'.ts(2559)

Dennis Over a year ago

And, If I give as: any instead of string, this time it throws an error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Dennis Over a year ago

Ah no! I forgot to declare as on source :) Sorry. This is correct. I didn't know we could do like this. Thanks for the lesson.

ray Over a year ago

Are you using this component without passing the “as” prop? If so you’d need to have it default to a div (or whatever). I’ll update my answer to provide a div fallback.

ray Over a year ago

Updated. Now defaults to div if the prop isn’t provided.

|

Collectives™ on Stack Overflow

How to create html element dynamically with props based on `as` on react (TypeScript)

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related