Line 9: Expected an assignment or function call and instead saw an expression no-unused-expressions

Question

I can not figure out the error i'm getting.

Line 9: Expected an assignment or function call and instead saw an expression no-unused-expressions.

import React from 'react'
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'

function DrinkDetails(props) {
    const { drink } = props;
    if (drink) {
        <div className="container section drink-details">
            <div className="card z-depth-0">
                <div className="card-content">
                    <span className="card-title">{ drink.title }</span>
                    <p>{ drink.content }</p>
                </div>
                <div className="card-action grey lighten-4 grey-text">
                    <div>Posted by {drink.authorFirstName} {drink.authorLastName}</div>
                    <div>30th of August, 3am</div>
                </div>
            </div>
        </div>
    } else {
        return (
            <div className="container center">
                <p> Loading Drink...</p>
            </div>
        )
    }

}

Answer 1

You need a return after if(drink) to return your JSX.

if (drink) {
  return (
    <div className="container section drink-details">
      <div className="card z-depth-0">
        <div className="card-content">
          <span className="card-title">{ drink.title }</span>
          <p>{ drink.content }</p>
        </div>
      </div>
      <div className="card-action grey lighten-4 grey-text">
          <div>Posted by {drink.authorFirstName} {drink.authorLastName}</div>
          <div>30th of August, 3am</div>
      </div>
    </div>
  )
}