I get an error when manipulating an HTML element from javascript, I'm working with react, the file is as follows:
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
the error it shows me is on line 10, which is the innerHTML. It tells me the following:
I don't understand what I'm doing wrong, thank you very much for your help
At the time of calling the getDay() function, the component does not yet exist in the DOM, so it does not find the
<span id="parrafoHora">0</span>
, besides I do not know why you use the innerHTML to change the content if you are using React.Try this: