Trato de aprender React JS y no entiendo cómo funciona la "función principal", hice un temporizador que me da la fecha y la hora, pero actualiza el temporizador solo cuando escribo algo en mi cuadro de búsqueda.
Ahí está mi código:
return ( <div className="app"> <main> <div className="search-box"> <input type="text" className="search-bar" placeholder="Search..." onChange={e =>setQuery(e.target.value)} value = {query} onKeyPress={search} /> </div> <div className="location"> {weather.temp} </div> <div className="location"> {new Date().toLocaleString() + ''} </div> </main> <div> </div> </div> ); } export default App;solo actualiza la fecha cuando presiono mis teclas en mi formulario. Soy totalmente nuevo en JS, así que creo que no entendí algo.
¡Gracias por tus respuestas!
Debe usar una de las funciones de temporizador proporcionadas por el entorno de host de JavaScript, como setInterval o setTimeout .
El siguiente código configura un componente Clock de React que se actualiza cada segundo usando un temporizador setInterval .
const { useState, useEffect } = React const Clock = (props) => { const {initialHours = '--', initialMinutes = '--', initialSeconds = '--', initialTimezoneOffset = ''} = props; const [hours, setHours] = useState(initialHours); const [minutes, setMinutes] = useState(initialMinutes); const [seconds, setSeconds] = useState(initialSeconds); const [timezoneOffset, setTimezoneOffset] = useState(initialTimezoneOffset); useEffect(()=>{ const intervalId = setInterval(() => { const now = new Date const timezoneOffset = -now.getTimezoneOffset()/60 setHours(now.getHours()) setMinutes(String(now.getMinutes()).padStart(2, '0')) setSeconds(String(now.getSeconds()).padStart(2, '0')) setTimezoneOffset(`${timezoneOffset >= 0 ? '+' : '-'}${timezoneOffset}`) }, 1000) return ()=> { clearInterval(intervalId) } }) return ( <div>{hours}:{minutes}:{seconds} UTC{timezoneOffset}</div> ) } ReactDOM.render( <Clock/>, document.querySelector('main') ) * { font-family: Courier; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <main></main>Creo que falta parte de su código aquí, de todos modos, si es nuevo, le recomiendo que se ciña a los ganchos. useState https://reactjs.org/docs/hooks-state.html y useEffect https://reactjs.org/docs/hooks-effect.html es probablemente lo que está buscando.