Set the HTML Tag of a Component via a Prop using Recompose

Tim Kindberg
InstructorTim Kindberg
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 6 years ago

Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap the underlying html tag of your component. Sometimes we want a component to behave the same overall but to use a different element in the HTML output. An example is swapping an <a> for a <button> or even a react router <Link> depending on circumstance.

[00:00] I have a little app with an anchor tag and a button. I want to create a generic link component, and I want it to be able to be either an anchor tag or a button based on a prop, but otherwise, I don't want the overall behavior of my link component to change just because the underlying element changes.

[00:18] I'll need to compose together a couple higher order components. I'll use width props to do some work. I'll provide a function to width props which receives the owner's props, and I'll destructure the type and the To prop off of there.

[00:34] Let's go ahead and set some defaults for these. I want the type to be A by default, and I'll have the To just be a hash symbol. Now I want to inspect the type, and if it's equal to A. I want to return a prop object that passes on the type and also converts the To to an HREF, because anchor tags navigate via the HREF attribute.

[01:08] If the type is not A, we can assume it's button. I'll still pass in the type again, and this time, I want to add an onClick handler. The button needs to redirect by setting the window.location. Now we'll apply all this to a component. This is where component from prop comes in.

[01:28] Component from prop is not a high-order component. It technically returns a component, but you don't pass a component. Instead, you pass it the name of the prop that you'd like to build the component from. In this case, I want to build a component that renders an element based on the type property that's coming in.

[01:49] Now, we can add a link. We can tell it to go to page one. Then we'll make this an anchor link, because we didn't provide a type. We can do another link that goes to page two. This one will send a type in, of button. We'll make it a button link.

[02:15] When I refresh, I have two anchor links and two button links, but the second two links use a consistent component interface. We don't care how it's going to do the navigation. All we specify is a To prop, and it just works. If we want to change the visual aspect, we change the type.

egghead
egghead
~ 6 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today