¿Alguien puede dar una respuesta?
No puedo actualizar el estado cuando hago clic en getbtn -> placeRange pass jsx to setbtn -> luego no puedo actualizar el estado cuando Silde the Range.
import React, { useState } from "react"; export default function Stack() { const [value, setvalue] = useState(0); const [btn, setbtn] = useState(<></>); function placeRange() { const jsx = ( <> <input type="range" onChange={(e) => { setvalue(e.target.value); }} /> <h1>{value}</h1> </> ); setbtn(jsx); } return ( <> <button onClick={placeRange}>getrange</button> {btn} </> ); }Esto parece estar funcionando para mí.
Aquí hay un ejemplo de trabajo en codesandbox
import { useState } from "react"; export default function App() { const [value, setvalue] = useState(0); const [btn, setbtn] = useState(<></>); function placeBtn() { const jsx = ( <> <button onClick={() => { setvalue(1); }} > Convert to 1 </button> </> ); setbtn(jsx); } return ( <> <h1>{value}</h1> <button onClick={placeBtn}>getbtn</button> {btn} </> ); }No estoy seguro de entender completamente lo que está tratando de lograr, esto no es lo suficientemente claro para mí. Según su código, parece que está tratando de establecer un rango de entrada en su lugar al hacer clic en el botón, luego, desea que este rango actualice el número debajo de él.
Si este es el caso, sugiero la siguiente solución:
import React, { useState } from "react"; export default function Stack() { const [value, setvalue] = useState(0); const [showRange, setShowRange] = useState(false); function placeRange() { setShowRange(!showRange); } return ( <> <button onClick={placeRange}>getrange</button> {showRange && ( <> <input type="range" onChange={(e) => { setvalue(e.target.value); }} /> <h1>{value}</h1> </> )} </> ); }