1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Using the `as` prop to reassign the HTML tag

    Sara VieiraSara Vieira
    reactReact

    In this lesson, we will use the as prop to reassign the HTML tag that is associated with one of our styled components.

    The as prop will be used to reassign a button element to be an a element

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 I have this button here and this button is already a styled component. As you can see here, it's a styled.button.

    0:06 Let's say that I want to add an A, a link and say a.href, and we can just add https://global.com. It doesn't really matter what's written there, but let me just fix it. Now, let's type Google and close this A. This A does not look good. Let's just be honest about it.

    0:29 What if we could reuse the button styles, but use it as an A. We want the button styles. I can just come here and say, "OK, cool. I want this to be a button." The problem is that hrefs don't work. It makes sense. That's how buttons work.

    0:44 We don't want to add this on an on click. There is a prop called as, which we can pass to any styled component that will basically reassign the HTML element. In this case, it's a button, but this part can be actually reassigned.

    0:58 If I come here and I say as and I add the HTML button at HTML component I want to replace it with, like this case A, this actually becomes a button. You can see that the styles are the same. We just have the sticks underlined, which is fixable in both by just adding text decoration and adding none.

    1:20 Now we have a completely working A as you can see and we have a button that doesn't go anywhere. This is how you can reassign HTML elements in styled components.