Ternery Expressions in JSX

JSX supports ternery expressions though its not the best practice to have so much logic in the return statement

const SeasonDisplay = (props) => {
  const season = getSeason(props.lat, new Date().getMonth());

  return (
    <div>
      {season === "winter" ? "Burr, it's chilly" : "Let's hit the beach"}
    </div>
  );
};

Instead, this would be preferable:

const SeasonDisplay = (props) => {
  const season = getSeason(props.lat, new Date().getMonth());
  const seasonResponse =
    season === "winter" ? "Burr, it's chilly" : "Let's hit the beach";

  return <div>{seasonResponse}</div>;
};

Add your comment