как сделать рирендер секунд?

Рейтинг: 0Ответов: 0Опубликовано: 14.06.2023

Хочу сделать рирендер что бы время динамично менялось каждую секунду, если кто то шарит как сделать так что бы не вытаскивать из DateTime часы минуты секунды отдельно, а закинуть это в один объект что бы он нормально показывался на странице или то что я сделал и так пойдёт с точки зрения лучших практик

const Krasnoyarsk = DateTime.fromObject({}, { zone: "Asia/Krasnoyarsk", numberingSystem: "beng" });

console.log(Krasnoyarsk);

const cards = [
    {
        id: "1",
        city: "Красноярск",
        time_hour: Krasnoyarsk.c.hour,
        time_minutes: Krasnoyarsk.c.minute,
        time_seconds: Krasnoyarsk.c.second,
        temp: "34"
    },
    
];

function App() {
    React.useEffect(() => {}, [cards.time_seconds]);

    return (
        <div className="App">
            <div className="container">
                <header className="header">
                    <h1>Узнай время в своём городе</h1>
                    <img src={smile} width={60} height={60} alt="smile-face" />
                </header>
                <div className="form">
                    <form>
                        <input type="text" placeholder="Введите название вашего города" />
                        <button>
                            <img width={40} height={40} src={acceptBtn} alt="btn" />
                        </button>
                    </form>
                </div>
                <div className="card__block">
                    {cards.map((card) => (
                        <div key={card.id} className="cards">
                            <h1>{card.city}</h1>
                            <h1>
                                {card.time_hour}:{card.time_minutes}:{card.time_seconds}
                            </h1>
                            <h1>Текущая температура: {card.temp} градусов</h1>
                            <img width={40} height={40} src={cross} alt="cross" />
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}

export default App;

Ответы

Ответов пока нет.