transferPropsTo [DEPRECATED]

Joe Maddalone: We've got this little wrapper around a bootstrap button. It returns a button primary. It gets our inner content, which is awesome.

It can have these nested components, which is great, but it sucks because I can't pass it anything else. I can't make it a different type of button. I really don't want to go and recreate the anchor tag as a component to pass in a bunch of properties, state, and all sorts of stuff.

The way that we can solve this is with this.transferPropsTo. We just wrap a return in that. What ends up happening is any properties that we pass to B button get passed to the next component, which, in our case, is an anchor tag.

We definitely want it to be a button. Let's say we're going to be responsible for passing in the type of button. I'm going to pass in a class name here.

Transfer Properties To is smart enough to know that when we pass in an additional class name, when it already has a class name, it'll just append that. It'll just add it to it.

We're just going to say, "Button and this next one and next one." Here, we'll do "Success." Here, we'll do "Danger." Load that up in the browser. Whoops.

You know what? Now that we've got multiple components, we need to have a parent. There we go. Load that up. Nope. That did not work. What'd I do wrong? Let's look at the console here. Unexpected token.

Let's pull this out a little bit. You know what? I didn't close that div. Let's load this up. There we go. We've got our three buttons with their three different classes.

That's pretty cool, but now we're stuck with this B heart thing. It just returns the heart icon. That sucks. Let's make this a little more reusable. We'll use this.transferPropsTo. Wrap a return in that.

We're going to change this to B icon. We'll be responsible for telling it which type of icon we want. Let's change all these to P icon. We'll say, "Class name equals..."

It's a little messy. That's fine. Let's drop this on the next line, this on the next line, and this on the next line. Here, it's a heart.

You know what? I don't know these that well. It's really good that I have it opened up in another window. I'll just pick some random ones. Load that back up. Now, we've got our different icons. That's awesome.

The other thing we can do, we can pass it just arbitrary stuff. Let's give each one of them an href. Href equals...This is all going to start pushing way down the screen. Alert hello.

Now, all of them should have an href. We've passed that href to B button. It's transferring that property to this anchor tag. When we click on it, we should get "Hello." Hello. Awesome.

There you go. That's a quick look at transferPropsTo.