DEV Community

Cover image for Dynamic HTML Tag in React Components with the "as" prop
Jacopo Marrone @tresorama
Jacopo Marrone @tresorama

Posted on • Originally published at jacopomarrone.com

1

Dynamic HTML Tag in React Components with the "as" prop

Imagine you're building a reusable <Section> component with React. The Section component renders an HTML <div> tag because you hardcoded it. However, in some cases, you might want to use an other tag instead, for example a <section> HTML tag.

This is a typical scenario when you want your HTML to be more semantic and SEO friendly.

The solution is to let the consumer decide which HTML tag should be used to render the component.

The "as" prop

This is nothing new.

It's an industry standard "approach" that allows you to dynamically decide which HTML tag should be used to render the component. A lot of React Components library use it, like Chakra UI and Material UI.

Without the "as" prop, you'd need to create separate components for each use case, and it makes no sense. Don't do it!

This is how you consume the "as" prop

import { Section } from './section';

const App = () => {
  return (
    <div>
      <Section as="section">CTA</Section>
      <Section as="article">My Article</Section>
      <Section>This use the default HTML tag of the component</Section>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

And this is the component definition

type SectionProps = {
  as?: React.ElementType,
  children: React.ReactNode,
}

export const Section = (props: SectionProps) => {

  const { as: Tag = 'div', children } = props;

  return <Tag>{children}</Tag>;

}
Enter fullscreen mode Exit fullscreen mode

Typescript Support for the "as" prop

React helps us with Typescript types.

Using the typescript's React.ElementType type, provided by React, you will obtain autocomplete for your IDE, like this

VS Code autocomplete suggestion for the

As an alternative to React.ElementType you can use

type SectionProps = {
  as?: keyof JSX.IntrinsicElements,
  children: React.ReactNode,
}
Enter fullscreen mode Exit fullscreen mode

or

type SectionProps = {
  as?: keyof HTMLElementTagNameMap,
  children: React.ReactNode,
}
Enter fullscreen mode Exit fullscreen mode

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (1)

Collapse
 
philip_zhang_854092d88473 profile image
Philip

The "as" prop in React allows dynamic rendering of different HTML tags, making components more flexible and semantic. To streamline development and automate testing, EchoAPI offers tools to efficiently test and debug APIs, ensuring smooth integration with your React projects.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay