Skip to main content
3 de 4
se eliminó 1 carácter en el cuerpo
g.4
  • 3.5k
  • 2
  • 11
  • 22

Parece que falta decirle a React que controle el componente checkbox, esto se hace mapeando el valor de la propiedad de estado value, en la propiedad value del checkbox:

    function App() {
      const [value, setValue] = React.useState(0);
      const [price, setPrice] = React.useState(8);
      const [plan, setPlan] = React.useState("10k");
      const [toggle, setToggle] = React.useState(false);

      const handleDiscount = () => {
        setToggle((toggle) => !toggle);
      };

      const handlePriceChange = (e) => {
        const valueChange = e.target.value;
        console.log("type: ",e.target.type);
        console.log("valueChange: ",valueChange)
        setValue(valueChange);
        //logica
      };

      return (
        <div className="App">
          <input
            type="range"
            name="range"
            value={value}
            min="0"
            max="100"
            id="range"
            onChange={handlePriceChange}
          />
          <br />
          <input
            type="checkbox"
            name="discount"
            id="discount"
            value={value}
            onClick={handleDiscount}
            onChange={handlePriceChange}
          />
          <label htmlFor="discount">discount</label>
          <div> {price} </div>
          <hr />
          <div> {plan} Pageviews </div>
        </div>
      );
    }
     
     
     ReactDOM.render(<App/>, document.getElementById('root'))
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

    <div id="root"></div>

Así como se encuentra el proyecto, el checkbox no tiene asignada la propiedad value, por lo cual le asigna un valor ON por default, y ese valor es el que se asigna a la propiedad de estado value.

Por esta razón, la barra de range se comporta de forma inestable, recíbe On en vez de un rango numerico.

Espero que esta respuesta sea de ayuda.

g.4
  • 3.5k
  • 2
  • 11
  • 22