title: How do I conditionally wrap a React component?
body: <p>I have a component that will sometimes need to be rendered as an <code>&lt;anchor&gt;</code> and other times as a <code>&lt;div&gt;</code>. The <code>prop</code> I read to determine this, is <code>this.props.url</code>.</p>
  
  <p>If it exists, I need to render the component wrapped in an <code>&lt;a href={this.props.url}&gt;</code>. Otherwise it just gets rendered as a <code>&lt;div/&gt;</code>.</p>
  
  <p>Possible?</p>
  
  <p>This is what I'm doing right now, but feel it could be simplified:</p>
  
  <pre><code>if (this.props.link) {
      return (
          &lt;a href={this.props.link}&gt;
              &lt;i&gt;
                  {this.props.count}
              &lt;/i&gt;
          &lt;/a&gt;
      );
  }
  
  return (
      &lt;i className={styles.Icon}&gt;
          {this.props.count}
      &lt;/i&gt;
  );
  </code></pre>
  
  <h2>UPDATE:</h2>
  
  <p>Here is the final lockup. Thanks for the tip, <a href="https://stackoverflow.com/users/669586/sulthan">@Sulthan</a>!</p>
  
  <pre><code>import React, { Component, PropTypes } from 'react';
  import classNames from 'classnames';
  
  export default class CommentCount extends Component {
  
      static propTypes = {
          count: PropTypes.number.isRequired,
          link: PropTypes.string,
          className: PropTypes.string
      }
  
      render() {
          const styles = require('./CommentCount.css');
          const {link, className, count} = this.props;
  
          const iconClasses = classNames({
              [styles.Icon]: true,
              [className]: !link &amp;&amp; className
          });
  
          const Icon = (
              &lt;i className={iconClasses}&gt;
                  {count}
              &lt;/i&gt;
          );
  
          if (link) {
              const baseClasses = classNames({
                  [styles.Base]: true,
                  [className]: className
              });
  
              return (
                  &lt;a href={link} className={baseClasses}&gt;
                      {Icon}
                  &lt;/a&gt;
              );
          }
  
          return Icon;
      }
  }
  </code></pre>