How do i use one state with variables in, instead of multible states with a single variable in? (React)

Question

im working with React and I want to instead of having multiple states with a single variable saved, I want a single state that has an object with for example:

{
priceAmount: 
employeesAmount:
answer: (yes or no from radio)
}

I want an object to be saved in a state, how do I do this? I think I might just have the wrong syntax.

I've read a couple different threads but haven't gotten it to work. Does anyone have a solution for this? Thanks!

How do I do this? my code below:

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)

  // const [priceData, setPriceData] = useState('');
  // const [employeesData, setEmployeesData] = useState('');


  const [formData, setFormData] = useState({
    priceAmount: 0,
    employeesAmount: 0
  });



  const Submit = (e) => {
    e.preventDefault()
    // formValues.priceAmount = price;
    // formValues.employeesAmount = employees;
    // setPriceData(price)
    // setEmployeesData(employees)
    // setpriceData({price, employees})

    setFormData({
      ...formData,
      price: employees,
    });
  }


  
  let price = 0;

  
  const calculatePrice = () => {
    
    if (employees <= 4 && price !== 995) {

      return price = 995;
      // console.log("1-4: price: " + price)

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

      return price = employees * 220;
      // console.log("5-50: price: " + price)

    } else if (employees >= 51 && employees <= 100) {
      
      return price = 995 + employees * 200;
      // console.log("51-100: price: " + price)

    } else if (employees >= 101 && employees <= 200) {
      
      return price = 995 + employees * 195;
      // console.log("101-200: price: " + price)

    } else if (employees >= 201) {

      return price = "Kontakta oss för offert!";
      // console.log("201+, price är: " + price)

    }

    // return 345;
  }

  return (
    <div className="App">
      <form onSubmit={Submit} 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)}
        />
        
        <p>Vill du arbeta digitalt och effektivt med er lönehantering?</p>
        <input type="radio" name="ja" id="optionJa"/> Ja

        <input type="radio" name="ja" id="optionNej" className="margin-radio"/> Nej


        <br/>

        <button className="submitBtn" type="submit" value="Submit">Begär offert</button>

      </form>

      <div className="custom-margin">
        <p>Data tagen från sparad state: </p>
        {/* <small>Pris: {priceData}</small> */}
        <small>formData: {formData}</small>
        <br/>
        {/* <small> Antal anställda: {employeesData}</small> */}
      </div>
    </div>
  );
}

export default App;

Answer 1

your problem is here:

<small>formData: {formData}</small>

formData is an object and react cannot render an object. DataType has to be primitive type or jsx element to get rendered (or an array of primitive type or jsx elements).

so you have to extract data from your object and pass it as an array of items

        <small>
          formData:
          {
            Object.entries(formData).map(([key, val]) => <span key={key}>{val}</span>)
          }
        </small>

or otherwise like this

        <small>
          formData:
          price amount: {formData.priceAmount}
          employee amount: {formData.employeesAmount}
        </small>

checkout the codesandbox