ДИНАМИЧЕСКИ ОТОБРАЖАЙТЕ РАЗНЫЙ ТЕКСТ В РАЗНЫЕ ДНИ В REACT JS.

Мы все открывали сайт в понедельник и, вероятно, видели текст, говорящий нам: «Сегодня понедельник, начало новой недели, считайте это», а когда мы открываем тот же сайт в пятницу, мы видим текст вроде «Выходные». близок, сделайте последний рывок, сегодня пятница».

Я, наверное, думал, что это их разработчик каждый день меняет текст, но это не так. В этой статье вы узнаете, как динамически отображать разные тексты/изображения/данные в разные дни недели в React.

Давайте запустим наше реагирующее приложение и удалим шаблон в App.js.

 npx create-react-app display-text-dynamically-on-different-days
 cd display-text-dynamically-on-different-days

Прежде всего, нам нужно создать массив текстовых сообщений, которые мы хотим отображать в разные дни, начиная с воскресенья и заканчивая субботой.

Каждый объект в нашем массиве будет иметь текст и день.

import "./App.css";

function App() {
  const messages = [
    {
      text: "It is Sunday morning",
      day: "Sunday",
    },
    {
      text: "It is Monday morning",
      day: "Monday",
    },
    {
      text: "It is Tuesday morning",
      day: "Tuesday",
    },
    {
      text: "It is Wednesday morning",
      day: "Wednesday",
    },
    {
      text: "It is Thursday morning",
      day: "Thursday",
    },
    {
      text: "It is Friday morning",
      day: "Friday",
    },
    {
      text: "It is Saturday morning",
      day: "Saturday",
    },
  ];
  return <div className="App"></div>;
}

export default App;

Чтобы увидеть, работает ли это, мы можем сопоставить этот массив и отобразить текст и день для каждого дня.

Внутри возврата давайте отладим то, что у нас есть.

 return (
    <div className="App">
      {messages.map((message) => (
        <div>
          <h1>{message.text}</h1>
          <h2>{message.day}</h2>
        </div>
      ))}
    </div>
  );

Если мы запустим наш сервер с

npm run start

В Javascript есть метод Date.getDay(), который возвращает день недели (от 0 до 6) даты.

Если мы выведем console.log непосредственно перед оператором return и посмотрим на нашу консоль.

 const date = new Date();
 console.log(date.getDay());

Если вы посмотрите на свою консоль, вы должны увидеть целое число от 0 до 6.

Если вы хотите получить название дня недели (а не просто число), мы можем получить массив всех дней недели, а затем использовать индекс, полученный из функции getDay().

 const date = new Date();
  const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  console.log(weekday[date.getDay()]);

Теперь, если вы посмотрите на консоль, вы должны увидеть текущую дату.

Теперь у нас есть 2 вещи, которые мы можем использовать, чтобы заставить нашу функцию работать: доступ к текущему дню и массив со всеми днями и текстами для каждого дня.

Мы сохраним текущий день в состоянии, а затем пройдемся по массиву сообщений и проверим, равен ли текущий день дню в массиве, а затем отобразим текст.

Теперь компонент будет

import "./App.css";
import React, { useState, useEffect } from "react";

function App() {
  const date = new Date();
  const weekday = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  const [currentDay, setCurrentDay] = useState("");
  useEffect(() => {
    setCurrentDay(weekday[date.getDay()]);
  }, [currentDay]);
  const messages = [
    {
      text: "It is Sunday morning",
      day: "Sunday",
    },
    {
      text: "It is Monday morning",
      day: "Monday",
    },
    {
      text: "It is Tuesday morning",
      day: "Tuesday",
    },
    {
      text: "It is Wednesday morning",
      day: "Wednesday",
    },
    {
      text: "It is Thursday morning",
      day: "Thursday",
    },
    {
      text: "It is Friday morning",
      day: "Friday",
    },
    {
      text: "It is Saturday morning",
      day: "Saturday",
    },
  ];

  return (
    <div className="App">
      {messages.map(
        (message) =>
          currentDay === message.day && (
            <div>
              <h1>{message.text}</h1>
              <h2>{message.day}</h2>
            </div>
          )
      )}
    </div>
  );
}

export default App;

Здесь мы вызываем useEffect каждый день, чтобы изменить текст. Затем мы перебираем сообщения и отображаем текст за текущий день.

Теперь, когда мы запускаем наш сервер, мы видим.

Теперь вы можете динамически отображать разные тексты в разные дни в вашем приложении для реагирования.

Вот репо здесь со всем, поставьте ему звезду и подпишитесь.

.Спасибо