Conditional rendering in React; is this THE way?

Question

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:

import React from 'react'

export default class LikeButton extends React.Component {
  constructor(props) {
    super(props)
    this.state = { likes: 0 }
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>
          Likes: {this.state.likes}
        </button>
        {
          this.state.likes > 0 ? (
            <button onClick={this.reset}>
              Unlike
            </button>
          ) : ('')
        }
      </div>
    )
  }

  increment = () => this.setState({ likes: this.state.likes + 1 })
  reset     = () => this.setState({ likes: 0 })
}

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?

Answer 1

You can make the conditional rendering look a bit nicer by using && instead of the conditional operator:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { likes: 0 }
  }

  render() {
    return (
      <div>
        <button onClick={this.increment}>
          Likes: {this.state.likes}
        </button>
        {
          this.state.likes > 0 && (
            <button onClick={this.reset}>
              Unlike
            </button>
          )
        }
      </div>
    )
  }

  increment = () => this.setState({ likes: this.state.likes + 1 })
  reset     = () => this.setState({ likes: 0 })
}
ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

But an even better improvement IMO would be to use a functional component instead of messing with objects and prototype methods, it makes things a lot more concise:

const App = () => {
  const [likes, setLikes] = React.useState(0);
  return (
    <div>
      <button onClick={() => setLikes(likes + 1)}>
        Likes: {likes}
      </button>
      {
        likes > 0 && (
          <button onClick={() => setLikes(0)}>
            Unlike
          </button>
        )
      }
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>

If you have multiple areas with conditional logic, you can separate them out into separate components for readability:

const Unlike = ({ setLikes }) => (
  <button onClick={() => setLikes(0)}>
    Unlike
  </button>
);
const App = () => {
  const [likes, setLikes] = React.useState(0);
  return (
    <div>
      <button onClick={() => setLikes(likes + 1)}>
        Likes: {likes}
      </button>
      {
        likes > 0 && <Unlike setLikes={setLikes} />
      }
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>