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.
React
Recompose