How to define time ranges in React?

this is my code. I’m try to define a range of hours so that it changes color depending on the moment of the day, but I don’t know how to create a range (e.g. from 7 – 12 -> morning). The problem now is that if I put 3am is says morning when I want it to say night, but, of course, I can’t go over 23 hours to set the night. Could you please help me?

import React from "react";
import ReactDOM from "react-dom";

const date = new Date(2021, 1, 1, 3);

const time = date.getHours();

let customStyle = {
  color: ""
};

function getTime() {
  const morning = time < 12;
  const afternoon = time < 18;
  const night = time < 23;

  if (morning) {
    customStyle = {
      color: "red"
    };
    return "Good morning";
  } else if (afternoon) {
    customStyle = {
      color: "green"
    };
    return "Good afternoon";
  } else if (night) {
    customStyle = {
      color: "blue"
    };
    return "Good night";
  }
}

console.log(getTime());

ReactDOM.render(
  <h1 className="heading" style={customStyle}>
    {" "}
    {getTime()}{" "}
  </h1>,

  document.getElementById("root")
);

Answer

You can just define your ranges more precisely with

const morning = false;
const afternoon = false;
const night = false;

if (time > 7 && time <= 12) {
morning = true;
} else if (time > 12 && time <= 18) {
afternoon = true;
} else {
night = true;
}