title: Conditional rendering in React; is this THE way?
body: <p>I was just looking into React to compare it to my go-to framework Vue and I was trying to conditionally render a button. When I looked into how to do this I made this:</p>
  <pre><code>import React from 'react'
  
  export default class LikeButton extends React.Component {
    constructor(props) {
      super(props)
      this.state = { likes: 0 }
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button onClick={this.increment}&gt;
            Likes: {this.state.likes}
          &lt;/button&gt;
          {
            this.state.likes &gt; 0 ? (
              &lt;button onClick={this.reset}&gt;
                Unlike
              &lt;/button&gt;
            ) : ('')
          }
        &lt;/div&gt;
      )
    }
  
    increment = () =&gt; this.setState({ likes: this.state.likes + 1 })
    reset     = () =&gt; this.setState({ likes: 0 })
  }
  
  </code></pre>
  <p>Is this REALLY the way to go? I feel like the syntax is very very ugly, atleast compared to Vue with it's v-if and v-show directives. Or is there a better way to achieve this in a clean way?</p>