title: Toggle effect in a react component
body: <p>I'm trying to convert and <em>old component</em> that has been coded in <em>vanillaJS into react</em> to add it into a new project.</p>
  <p>The component consists in two <code>inputs</code>, one with the type <code>range</code> and the other one with the type <code>checkbox</code> and two <code>variables</code> that change with the hook <code>useState</code>  that change his state depending the events that are trigged with the <code>input's</code>.
  For example when someone move the <code>input</code> with the type <code>range</code> the funcion <code>handlePriceChange</code> it's fired and the two <code>variables</code> are <code>setted</code> with the new values based in the <code>range</code>, at the same time the function check if the <code>input</code> with the type <code>checkbox</code> is <code>checked</code>, if this is <code>true</code> a 25% will be subtracted from the <code>price</code> variable, otherwise it will return the same price without discount.</p>
  <p>The problem is that eveytime I click over the <code>checkbox</code> the discount is maded but the value of the <code>price</code> return to his original state and the <code>range</code> bar return to the middle.</p>
  <p>I was thinking a lot how to solve this, one of the best approach I think could be <code>useEffect</code>, but I'm new in react and I'm open to new ideas.</p>
  <p>here you can see a sandbox with the code running : <a href="https://codesandbox.io/s/damp-glade-uj0ec?file=/src/App.js:69-1538" rel="nofollow noreferrer">sandbox</a></p>
  <p>This is the code of the component :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default function App() {
    const [value, setValue] = useState(0);
    const [price, setPrice] = useState(8);
    const [plan, setPlan] = useState("10k");
    const [toggle, setToggle] = useState(false);
  
    const handleDiscount = () =&gt; {
      setToggle((toggle) =&gt; !toggle);
    };
  
    const handlePriceChange = (e) =&gt; {
      const valueChange = e.target.value;
      setValue(valueChange);
      let pricing = 8;
      if ((value &gt; 0) &amp; (value &lt;= 20)) {
        setPlan("10k");
        pricing = 8;
      } else if (value &gt; 20 &amp;&amp; value &lt;= 40) {
        setPlan("50k");
        pricing = 12;
      } else if (value &gt; 40 &amp;&amp; value &lt;= 60) {
        setPlan("100k");
        pricing = 16;
      } else if (value &gt; 60 &amp;&amp; value &lt;= 80) {
        setPlan("500k");
        pricing = 24;
      } else if (value &gt; 80 &amp;&amp; value &lt;= 100) {
        setPlan("1M");
        pricing = 36;
      }
  
      if (toggle === true) {
        setPrice(pricing - pricing * 0.25);
      } else {
        setPrice(pricing);
      }
    };
  
    return (
      &lt;div className="App"&gt;
        &lt;input
          type="range"
          name="range"
          value={value}
          min="0"
          max="100"
          className="slider"
          id="range"
          onChange={handlePriceChange}
        /&gt;
        &lt;input
          type="checkbox"
          name="discount"
          className="discount"
          id="discount"
          onClick={handleDiscount}
          onChange={handlePriceChange}
        /&gt;
        &lt;&gt; {price} &lt;/&gt;
        &lt;hr /&gt;
        &lt;&gt; {plan} Pageviews &lt;/&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  <p>And this is the code of the original version in vanillaJS :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const range = document.getElementById('range');
  const pageviewsCount = document.getElementById('pageviews-count');
  const toggleDiscount = document.getElementById('toggle_discount');
  const price = document.getElementById('price');
  
  function handlePricingChanges(value) {
      let pricing = 8;
  
      if ((value &gt; 0) &amp; (value &lt;= 20)) {
          pageviewsCount.textContent = '10K Pageviews';
          pricing = 8;
      } else if (value &gt; 20 &amp;&amp; value &lt;= 40) {
          pageviewsCount.textContent = '50K Pageviews';
          pricing = 12;
      } else if (value &gt; 40 &amp;&amp; value &lt;= 60) {
          pageviewsCount.textContent = '100K Pageviews';
          pricing = 16;
      } else if (value &gt; 60 &amp;&amp; value &lt;= 80) {
          pageviewsCount.textContent = '500K Pageviews';
          pricing = 24;
      } else if (value &gt; 80 &amp;&amp; value &lt;= 100) {
          pageviewsCount.textContent = '1M Pageviews';
          pricing = 36;
      }
  
      if (toggleDiscount.checked) {
          const totalValue = pricing - pricing * 0.25;
          price.textContent = `$${totalValue}.00`;
      } else {
          price.textContent = `$${pricing}.00`;
      }
  
  
  }
  
  range.addEventListener('input', function (event) {
      console.log('range value :&gt;&gt; ', event.target.value);
      const value = range.value;
      handlePricingChanges(value);
  });
  
  toggleDiscount.addEventListener('input', function (event) {
      console.log('range value :&gt;&gt; ', event.target.value);
      const value = range.value;
      handlePricingChanges(value);</code></pre>
  </div>
  </div>
  </p>