What is the best way to change the heading text and color in React based on the time of day when calling a function?

Question

What is the best way to change the heading text and color in React based on the time of day when calling a function?

I want to dynamically change the text and color of my h1 heading based on the time of day.
I'm encountering an error with my current code: "Cannot set property 'innerText' of null".
I've tried to figure out how to incorporate a function in the render section, but haven't had any luck.
This is what my code looks like:

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

const morning = { color: "blue" };
const afternoon = { color: "green" };
const night = { color: "grey" };
const date = new Date();
const currentHour = date.getHours();

function sayHello() {
  const heading = document.querySelector("h1");
  if (currentHour < 12) {
    heading.innerText = "Good Morning!";
    heading.style.color = morning;
  } else if (currentHour > 12 && currentHour < 18) {
    heading.innerText = "Good Afternoon!";
    heading.style.color = afternoon;
  } else {
    heading.innerText = "Good Night!";
    heading.style.color = night;
  }
}

ReactDOM.render(
  <h1 className="heading">{sayHello()}</h1>,
  document.getElementById("root")
);

javascript html css reactjs jsx

Answer 1

Answer №1

Give this approach a try, it should work for you. You've defined a function but forgot to call it as well. Here's an alternative way to execute the code provided above.

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

// Set up time variable 
const time = new Date().getHours();
let greeting = "";

// Define color variable
let colorStyle = {
color: ""
};

// Implementing if/else statements
if (time <= 12) {
greeting = "Good Morning";
colorStyle.color = "blue";
} else if (time > 12 && time < 18) {
   greeting = "Good Afternoon";
   colorStyle.color = "green";
} else {
  greeting = "Good Night"; 
  colorStyle.color = "gray";
}

ReactDOM.render(
 <h1 className="heading" style={colorStyle}>
   {greeting}!
 </h1>,
 document.getElementById("root")
 );

Answer 2

Give this approach a try, it should work for you. You've defined a function but forgot to call it as well. Here's an alternative way to execute the code provided above.

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

// Set up time variable 
const time = new Date().getHours();
let greeting = "";

// Define color variable
let colorStyle = {
color: ""
};

// Implementing if/else statements
if (time <= 12) {
greeting = "Good Morning";
colorStyle.color = "blue";
} else if (time > 12 && time < 18) {
   greeting = "Good Afternoon";
   colorStyle.color = "green";
} else {
  greeting = "Good Night"; 
  colorStyle.color = "gray";
}

ReactDOM.render(
 <h1 className="heading" style={colorStyle}>
   {greeting}!
 </h1>,
 document.getElementById("root")
 );

Answer 3

Answer №2

This code snippet demonstrates a basic usage of React. To display a different greeting based on the time of day, you can follow this structure:

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

function Greeting() {
  const currentHour = new Date().getHours();
  
  // Determine the color and text for the greeting based on the current hour
  const [color, message] = 
    currentHour < 12 ? ["blue", "Good Morning!"] : 
    currentHour >= 12 && currentHour < 18 ? ["green", "Good Afternoon!"] :
    ["grey", "Good Night!"];

  return (
    <h1 style={{color}}>
      {message}
    </h1>
  )
}

ReactDOM.render(
  <Greeting />,
  document.getElementById("root")
);

Answer 4

This code snippet demonstrates a basic usage of React. To display a different greeting based on the time of day, you can follow this structure:

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

function Greeting() {
  const currentHour = new Date().getHours();
  
  // Determine the color and text for the greeting based on the current hour
  const [color, message] = 
    currentHour < 12 ? ["blue", "Good Morning!"] : 
    currentHour >= 12 && currentHour < 18 ? ["green", "Good Afternoon!"] :
    ["grey", "Good Night!"];

  return (
    <h1 style={{color}}>
      {message}
    </h1>
  )
}

ReactDOM.render(
  <Greeting />,
  document.getElementById("root")
);

Answer 5

Answer №3

I am a big fan of utilizing the useState and useEffect hooks in my projects.

Check out this example on CodeSandbox for more details!

import React, { useState, useEffect } from "react";

const morning = { color: "blue" };
const afternoon = { color: "green" };
const night = { color: "grey" };

const SayHello = () => {
  const [helloText, setHelloText] = useState("");
  const [helloTextColor, setHelloTextColor] = useState("");

  useEffect(() => {
    const date = new Date();
    const currentHour = date.getHours();
    if (currentHour < 12) {
      setHelloText("Good Morning!");
      setHelloTextColor(morning);
    } else if (currentHour > 12 && currentHour < 18) {
      setHelloText("Good Afternoon!");
      setHelloTextColor(afternoon);
    } else {
      setHelloText("Good Night!");
      setHelloTextColor(night);
    }
  }, []);
  return <div style={{ color: helloTextColor }}>{helloText}</div>;
};

export default SayHello;

Answer 6

I am a big fan of utilizing the useState and useEffect hooks in my projects.

Check out this example on CodeSandbox for more details!

import React, { useState, useEffect } from "react";

const morning = { color: "blue" };
const afternoon = { color: "green" };
const night = { color: "grey" };

const SayHello = () => {
  const [helloText, setHelloText] = useState("");
  const [helloTextColor, setHelloTextColor] = useState("");

  useEffect(() => {
    const date = new Date();
    const currentHour = date.getHours();
    if (currentHour < 12) {
      setHelloText("Good Morning!");
      setHelloTextColor(morning);
    } else if (currentHour > 12 && currentHour < 18) {
      setHelloText("Good Afternoon!");
      setHelloTextColor(afternoon);
    } else {
      setHelloText("Good Night!");
      setHelloTextColor(night);
    }
  }, []);
  return <div style={{ color: helloTextColor }}>{helloText}</div>;
};

export default SayHello;

Answer 7

Answer №4

When working with scripts, don't forget to utilize the Set Time Interval function to run your code at specified intervals, such as every minute. This allows you to continuously monitor and update your application state based on time intervals.

Answer 8

When working with scripts, don't forget to utilize the Set Time Interval function to run your code at specified intervals, such as every minute. This allows you to continuously monitor and update your application state based on time intervals.

What is the best way to change the heading text and color in React based on the time of day when calling a function?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Leveraging GridFS-Stream to transfer image files to the Front-End React.js via Axios - Encoding chunks into base64 strings

How to empty an array once all its elements have been displayed

Having difficulty in animating the upward movement of textbox2

Stacking SVG elements can lead to distortion effects

Looking for assistance in streamlining JavaScript for loops?

Error: The function getOrders is not defined in the customerFactory

What is the functionality of an Angular service that retrieves an

Getting JSON data from an API using $.ajax

The Debate: Single Javascript File vs. Lazy Loading

Troubles arising while using ng serve in Angular 2

Ensuring draggable div remains fixed while scrolling through the page

Retrieve Latitude and Longitude by clicking using JavaScript

Capacitor implementation of NextJS Server-Side Rendering

Refreshing browser data with JQuery ajax when the browser is refreshed

What is the best way to navigate through the underlying MatDialog while the MatSelect is active?

Apply a CSS class to the selected radio button when retrieving row data from the table

How can we retrieve the clicked object in a done/fail function when using jQuery for an ajax request?

I am looking to remove the target attribute from an anchor tag if it does not have a value assigned

Show a single jQuery Validation error

Modifying the disabled attribute of an input tag upon button click in Angular 2