title: Components with 'Variants' in React - Conditional Rendering
body: <p>pretty basic question here. </p>
  
  <p>I am trying to begin learning React and I am curious about the best design pattern to go about this sort of thing. </p>
  
  <p>I have a button component, and I want a 'primary' and 'secondary' variant of the component that apply a different class. Would the following be the best way to go about that? I am passing a 'variant' prop that defines which button to use. </p>
  
  <p>If this isn't the best solution, what would be if I would like 'variants' for particular components. </p>
  
  <p>Thanks!</p>
  
  <pre><code>class Button extends Component {
  
  render() {
  
    // --- SECONDARY BUTTON --- //
    if(this.props.variant == 'secondary') {
  
      return (
        &lt;div className = 'button-wrapper secondary'&gt;
          &lt;div className = 'button'&gt;
            {this.props.text}
          &lt;/div&gt;
        &lt;/div&gt;
      );
  
    // --- PRIMARY BUTTON --- //
    }else if(this.props.variant == 'primary') {
  
      return (
        &lt;div className = 'button-wrapper primary'&gt;
          &lt;div className = 'button'&gt;
            {this.props.text}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  }
  </code></pre>