Skip to main content
1 de 4
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 tu 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.

Espero que esta respuesta sea de ayuda.

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