React - nothing was returned from render

Question

I have a component that needs to either render one link or if the item is an array, render each item in the array, separated by a '/'.

I am getting the error that nothing is returned from my render component. I think it's because i'm using an if else statement but i'm not sure.

class Item extends React.Component {
  constructor(props) {
    super(props)

    this.renderArray = this.renderArray.bind(this)
  }

  renderArray (item) {
    const items = item
    items.forEach((item, key) => {
      return (
        <a href={item.link} title={item.text} /> + '/'
      )
    })
  }

  render () {
    const { item } = this.props
    const { link, text, classes } = item
    if (!link && text) {
      return (
        <span>
          <br />
          <strong dangerouslySetInnerHTML={{ __html: text }} />
        </span>
      )
    }
    const className = classNames(
      classes
    )
    if (Array.isArray(item)) return this.renderArray(item)
    return (
      <a href={link} className={className} title={text} dangerouslySetInnerHTML={{ __html: text }} />
    )
  }
}

Answer 1

Your renderArray() method does not currently return anything. Try updating it to something like:

renderArray (items) {
    return items.map((item, key) => {
      return (
        <a href={item.link} title={item.text} /> + '/'
      )
    })
  }

Answer 2

Since your are using forEach for looping, it doesn't return anything in this case.

You can use map function for looping.

renderArray (items) {
  return items.map((item, key) => {
    return (
      <a href={item.link} title={item.text} /> + '/'
    )
  })
}

OR You can use

renderArray (item) {
  const items = item;
  let contentToRender = [];
  items.forEach((item, key) => {
    contentToRender.push(
      <a href={item.link} title={item.text} /> + '/'
    )
  })
}