Tengo mi componente CountDownSquare. Quiero que desaparezca una vez que el temporizador termine la cuenta regresiva por completo. Tengo datos en homePageData que contiene el texto principal en un elemento h3, este texto debería aparecer una vez que el temporizador esté completamente terminado. Aquí hay una declaración ternaria que intento asignar, pero no está asignada a nada de la forma en que pensé que sería. Aquí hay un fragmento de lo que pensé
const { homePageData } = props; {homePageData[0].showCountdown ? <CountDownSquare/>: styles.homeBody} return ( homePageData && ( <Layout> <div className={styles.Home}> <Image src={wordmark} alt="Hammer and Hope wordmark" /> <CountDownSquare > </CountDownSquare> {/* <div className={styles.homeBody}> <h3 className={styles.mainText}>{homePageData[0].mainText}</h3> */} <Nav /> </div> </Layout> ) ); } ```Supongo que homePageData[0].showCountDown es un valor booleano que es cierto si la cuenta regresiva está completa en el componente principal.
Debe agregar condiciones mientras renderiza su componente.
El siguiente fragmento representará el componente CountDownSquare y la etiqueta h3 con homePageData[0].mainText si homePageData[0].showCountdown es verdadero.
const { homePageData } = props; return ( homePageData ?? ( <Layout> <div className={styles.Home}> <Image src={wordmark} alt="Hammer and Hope wordmark" /> {homePageData[0].showCountdown ?? <CountDownSquare > </CountDownSquare> <div className={styles.homeBody}> <h3 className={styles.mainText}>{homePageData[0].mainText}</h3> </div> } </div> </Layout> ) );