diff --git a/lib/link.js b/lib/link.js
index e352eec5df76d..eca2e798b1670 100644
--- a/lib/link.js
+++ b/lib/link.js
@@ -11,8 +11,16 @@ export default class Link extends Component {
static propTypes = {
children: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.element
+ PropTypes.element,
+ (props, propName) => {
+ const value = props[propName]
+
+ if (typeof value === 'string') {
+ warnLink(`Warning: You're using a string directly inside . This usage has been deprecated. Please add an tag as child of `)
+ }
+
+ return null
+ }
]).isRequired
}
@@ -54,28 +62,24 @@ export default class Link extends Component {
}
render () {
- const children = Children.map(this.props.children, (child) => {
- const props = {
- onClick: this.linkClicked
- }
-
- const isAnchor = child && child.type === 'a'
+ let { children } = this.props
+ // Deprecated. Warning shown by propType check. If the childen provided is a string (example) we wrap it in an tag
+ if (typeof children === 'string') {
+ children = {children}
+ }
- // if child does not specify a href, specify it
- // so that repetition is not needed by the user
- if (!isAnchor || !('href' in child.props)) {
- props.href = this.props.as || this.props.href
- }
+ // This will return the first child, if multiple are provided it will throw an error
+ const child = Children.only(children)
+ const props = {
+ onClick: this.linkClicked
+ }
- if (isAnchor) {
- return React.cloneElement(child, props)
- } else {
- warnLink(`Warning: Every Link must be the parent of an anchor, this pattern is deprecated. Please add an anchor inside the .`)
- return {child}
- }
- })
+ // If child is an tag and doesn't have a href attribute we specify it so that repetition is not needed by the user
+ if (child.type === 'a' && !('href' in child.props)) {
+ props.href = this.props.as || this.props.href
+ }
- return children[0]
+ return React.cloneElement(child, props)
}
}