Creo que estoy en el camino correcto, pero básicamente tengo un archivo con 3 divs en una matriz que quiero mostrar uno cada 24 horas.

Encontré un clon de wordle en Github que esencialmente hace esto con una función "getWordOfTheDay", pero estoy confundido sobre dónde colocaría estos divs aleatorios para que se representen en el componente principal.

Siento que la solución sería encontrar una forma diferente de representar DisplayComponent como un elemento JSX en lugar de hacer esto: < DisplayComponent >< / DisplayComponent >

aquí está mi componente de 'aplicación' donde quiero mostrar un cierto div a la vez en la pantalla de inicio. estos divs están coloreados de manera diferente con CSS para que pueda distinguir cuál es cuál.

 import React, { Component } from 'react'; import './App.css'; import Layout from './components/Layout' function daysSinceStart() { const start = (new Date(2022, 2, 1)).getTime(); const now = (new Date()).getTime(); return Math.floor( (now - start) / (1000 * 60 * 60 * 24)); } export class App extends Component { render() { const componentsArray = [<div className="a"></div>, <div className="b"></div>, <div className="c"></div>] const DisplayComponent = componentsArray[daysSinceStart % componentsArray.length]; return ( <Layout> <div className='title'>welcome</div> <div className="page"> <div className="container"> <DisplayComponent> <img src="" alt="" id="img" className="img" draggable= {false}/> </DisplayComponent> </div> </div> </Layout> ); } } export default App;

Muchas gracias por adelantado.