I have a component that will sometimes need to be rendered as an <anchor>
and other times as a <div>
. The prop
I read to determine this, is this.props.url
.
If it exists, I need to render the component wrapped in an <a href={this.props.url}>
. Otherwise it just gets rendered as a <div/>
.
Possible?
This is what I'm doing right now, but feel it could be simplified:
if (this.props.link) {
return (
<a href={this.props.link}>
<i>
{this.props.count}
</i>
</a>
);
}
return (
<i className={styles.Icon}>
{this.props.count}
</i>
);
const baseClasses =
into thatif (this.props.link)
branch. As you are using ES6, so you can also simplify a bit byconst {link, className} = this.props;
and then usinglink
andclassName
as local variables.