0

se me presento un error a la hora de manipular un elemento HTML desde javascript, estoy trabajando con react, el file es el siguiente:

import {React, Fragment} from 'react'
import '../styles/Index/index.css'
const PantallaBloqueda = () => {
    function obtenerDia(){

        //Obtenemos la hora y los minutos
        let hora = new Date().getHours() //set de horas
        let minutos = new Date().getMinutes() //set de minutos

        let parrafoHora = document.getElementById('parrafoHora')
        parrafoHora.innerHTML = hora + ":" + minutos

        
    }


    obtenerDia();

    return (
        <div className="container">
            <div className="background">
                <div className="container-block">

                <div className="hora">
                    <span id="parrafoHora">0</span>
                    <p>:</p>
                    <p id="parrafoMinutos">0</p>
                </div>

                <div className="dia">
                    <p id="parrafoDia">Lunes </p>
                    <p id="parrafoMes">Octubre </p>
                    <p id="parrafoFecha">29</p>
                </div>
                </div>
            </div>
        </div>
    )
}

export default PantallaBloqueda

el error que me presenta es en la linea 10, que es el innerHTML. Me dice lo siguiente:

introducir la descripción de la imagen aquí

No entiendo que estoy haciendo mal, muchas gracias por su ayuda

1 respuesta 1

1

Al momento de llamar a la funcion obtenerDia() aun no existe en el DOM el componente por eso no encuentra el <span id="parrafoHora">0</span>, además de que no sé porque utilizas el innerHTML para cambiar el contenido si estas utilizando React.

Intenta con esto:

import {React, Fragment} from 'react'
import '../styles/Index/index.css'

const PantallaBloqueda = () => {
    const hora = new Date().getHours()
    const minutos = new Date().getMinutes()

    return (
        <div className="container">
            <div className="background">
                <div className="container-block">

                <div className="hora">
                    <span id="parrafoHora">{hora}</span>
                    <p>:</p>
                    <p id="parrafoMinutos">{minutos}</p>
                </div>

                <div className="dia">
                    <p id="parrafoDia">Lunes </p>
                    <p id="parrafoMes">Octubre </p>
                    <p id="parrafoFecha">29</p>
                </div>
                </div>
            </div>
        </div>
    )
}

export default PantallaBloqueda

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.