Skip to content
Home » How to Create a Dynamic Greeting Message in React

How to Create a Dynamic Greeting Message in React

In this tutorial, we will learn how to create a dynamic greeting message in React using JavaScript. The program will display a different greeting based on the current time and will update the message dynamically without requiring a page reload.

Code

// will need a HTML page with "root"

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

const date = new Date();
const currentTime = date.getHours();
const currentMins = date.getMinutes();

let greeting;

const customSyle = {
  color: ""
};

if (currentTime < 12) {
  greeting = "good morning";
  customSyle.color = "red";
} else if (currentTime < 18) {
  greeting = "good evening";
  customSyle.color = "blue";
} else {
  greeting = "good night";
  customSyle.color = "puprle";
}

ReactDOM.render(
  <h1 className="heading" style={customSyle}>
    {currentTime + ":" + currentMins + " " + greeting}
  </h1>,

  document.getElementById("root")
);

Code Explanation

To begin, we need to import the required modules, React and ReactDOM, which are used for rendering our component in the browser. We also create two variables: “date” and “currentTime,” which store the current date and time respectively. Additionally, we initialize an empty variable called “greeting” and a custom style object.

Next, we define the customStyle object that will be used to dynamically change the color of our greeting message based on the time of day. The color property is initially set to an empty string.

We then use conditional statements to determine the appropriate greeting based on the current time. If the currentTime is less than 12, we set the greeting to “good morning” and change the color to red. If the currentTime is between 12 and 18, we set the greeting to “good evening” and change the color to blue. Otherwise, if the currentTime is greater than or equal to 18, we set the greeting to “good night” and change the color to purple.

Finally, we use the ReactDOM.render method to render our greeting message as an h1 element. We apply the customStyle object as a style attribute to the h1 element and concatenate the current time, minutes, and greeting to display the dynamic message. The rendered component is then attached to the “root” element in our HTML page.

Example Usage:

Consider the following example scenario: the user visits our webpage at 4:30 PM.

Based on the current time, the program will set the greeting variable to “good evening” and the customStyle color property to blue. The rendered h1 element will display “4:30 PM good evening” with the text color set to blue.

This dynamic greeting allows users to see an up-to-date and personalized message every time they visit the webpage without the need for manual updates.

In conclusion, we have learned how to create a dynamic greeting message in React using JavaScript. By leveraging conditional statements and rendering components with ReactDOM, we can display different greetings based on the current time. This functionality provides a personalized experience for users visiting our webpage.

Also checkout the following codes.


How to Create Routes and Route Handling in Express HTTP Server
How to Fix Google Fonts Display Issue on Mac

Tags: