[typescript] Smarter logic?

Problem description

Button has href prop. If that prop is set, a element is used to render the button (https://material-ui-1dab0.firebaseapp.com/api/button/). It would be nice if Button had also target property.

Versions

• Material-UI: 1.0.0-beta.8

[oliviertassinari]

A better alternative where you will not risk a property collision:

<ListItem component={props => <Link {...props} to="/about" />}>
  // ...
</ListItem>

I have always considered the below pattern an elegant “hack” (it’s harder to understand). But what if both ListItem and Link implement a disabled property that you don’t want to share the same value between? You use the pattern above, not below.

<ListItem component={Link} to="/about">
  // ...
</ListItem>

It’s also why you won’t find this third API with Material-UI. It’s a tradeoff between the two previous ones that suffer limitations without being much simpler.

<ListItem component={<Link to="/about" />}>
  // ...
</ListItem>

[benbayard]

@mctep That looks fine to be, but it should be noted that inline lambdas are highly unperformant. If I were to write docs for this I would write it as:

function buttonLinkCreator(to: string) {
  return (props: ButtonProps) => <Link {...props} to={to} />
}

const HomePageLink = buttonLinkCreator('/');

class Blah extends React.Component {
  render() {
    return <Button component={HomePageLink} />;
  }
}