React Update Price with useState

user_12225905 0
Viewed 407

Im new on react and need help to implement a price counter with UseState. What i want to do instead of the code bellow is to Use price as a useState instead like "const [price, setPrice] = useState(995)"

Depends how many employees there is the price will raise with 220.

Could someone help me?

import React, {useState} from 'react';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
import './App.css';

function App() {

  const [employees, setEmployees] = useState(1)
  
  let price = 0;
  
  const calculatePrice = () => {
    
    if (employees <= 4 && price !== 995) {

      return price = 995;
 

    } else if (employees >= 5 && employees <= 50) {

      return price = employees * 220;
     

    } else if (employees >= 51 && employees <= 100) {
      
      return price = 995 + employees * 200;
   

    } else if (employees >= 101 && employees <= 200) {
      
      return price = 995 + employees * 195;
    

    } else if (employees >= 201) {

      return price = "Kontakta oss för offert!";
     

    }

    return 345;
  }

  return (
    <div className="App">
      <div className="calculator">

        <div>Pris: {calculatePrice()}</div>
        <div> Antal anställda: {employees}</div>
        {/* <div> anställd{employees !== 1 && 'a'} {employees}</div> */}
        <Slider
          min={1}
          max={201}
          value={employees}
          onChange={(v) => setEmployees(v)}
        />

      </div>
    </div>
  );
}

export default App;
use-state reactjs
1 Answers

price appears to be a derived value from your employees state value. You don't generally store values in state that are easily derivable from state.

You can create a price state, but doing so would/could be considered an anti-pattern React.

Identify the Minimal (but complete) Representation of UI State

Let’s go through each one and figure out which one is state. Ask three questions about each piece of data:

  1. Is it passed in from a parent via props? If so, it probably isn’t state.
  2. Does it remain unchanged over time? If so, it probably isn’t state.
  3. Can you compute it based on any other state or props in your component? If so, it isn’t state.

Not Recommended, but...

If you really wanted to, and you just want to see it and learn, then this is one way you could move the logic into price state. Use an useEffect hook to respond to updates on the employees state to recompute the `price state

function MyApp() {
  const [employees, setEmployees] = useState(1);
  const [price, setPrice] = useState(995);

  useEffect(() => {
    const calculatePrice = () => {
      if (employees <= 4) {
        return 995;
      } else if (employees <= 50) {
        return employees * 220;
      } else if (employees <= 100) {
        return 995 + employees * 200;
      } else if (employees <= 200) {
        return 995 + employees * 195;
      }
      return "Kontakta oss för offert!";
    };
    setPrice(calculatePrice());
  }, [employees]);

  return (
    <div className="App">
      <div className="calculator">
        <div>Pris: {price}</div>
        <div> Antal anställda: {employees}</div>
        {/* <div> anställd{employees !== 1 && 'a'} {employees}</div> */}
        <Slider
          min={1}
          max={201}
          value={employees}
          onChange={(v) => setEmployees(v)}
        />
      </div>
    </div>
  );
}

Demo

Edit react-update-price-with-usestate

The more correct and optimal solution is the one you have already, computing the derived price value from your state.

user_86908570
Related