Actualmente estoy construyendo un temporizador de cuenta regresiva donde un usuario ingresa el tiempo en minutos y puede iniciar y detener el reloj. Estoy enfrentando dos errores,
Hice un estado en running cuando el reloj está funcionando y, en función de este estado, devuelvo los botones (detener/iniciar), pero recibo el siguiente error al usar esta función.
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.
El accesorio de inicio autostart del componente react-Countdown no funciona en este caso. ( enlace para el doc .
También he adjuntado el enlace y el código de Codesandbox.
Aquí está el enlace de Codesanbox
mi codigo actual es
import React, { useState } from "react"; import Countdown from "react-countdown"; const Stopwatch = () => { const [running, setRunning] = useState(true); const [time, setTime] = useState(6); const handleOnChange = (e) => { console.log(e.target.value); setTime(e.target.value); }; function buttons(running) { if(running ){ return ( <div> <button style={{ marginTop: "15px" }} onClick={() => setRunning(false)}> Stop </button> </div> ) } else { return ( <div> <button onClick={() => setRunning(true)}>Start</button> </div> ); } } console.log("time = " + time); return ( <> <div> <label htmlFor="time"> Enter time in minutes </label> <input type="text" id="time" name="time" value={time} onChange={(e) => handleOnChange(e)} /> </div> <div> <h1> <Countdown date={Date.now() + { time } * 4000} precision={3} autoStart={running} renderer={({ hours, minutes, seconds, completed }) => { return ( <span> {hours}:{minutes}:{seconds} </span> ); }} /> </h1> </div> {buttons} </> ); }; export default Stopwatch;Por favor diga el error.
Resolví el primer error usando la función dentro de DOM solo así:
import React, { useState } from "react"; import Countdown from "react-countdown"; const Stopwatch = () => { const [running, setRunning] = useState(false); const [time, setTime] = useState(6); const handleOnChange = (e) => { console.log(e.target.value); setTime(e.target.value); }; console.log("time = " + time); return ( <> <div> <label htmlFor="time"> Enter time in minutes </label> <input type="text" id="time" name="time" value={time} onChange={(e) => handleOnChange(e)} /> </div> <div> <h1> <Countdown date={Date.now() + { time } * 4000} precision={3} autoStart={running} renderer={({ hours, minutes, seconds, completed }) => { return ( <span> {hours}:{minutes}:{seconds} </span> ); }} /> </h1> </div> {running ? ( <div> <button style={{ marginTop: "15px" }} onClick={() => setRunning(false)} > Stop </button> </div> ) : ( <div> <button onClick={() => setRunning(true)}>Start</button> </div> )} </> ); }; export default Stopwatch; Pero aún así, el inicio autostart no funciona, por lo que después de ingresar el valor en el campo de texto y presionar iniciar, the clock does not appear.