Reputation: 460

useState initialization error in react js

I am attempting to create a small form that sums up the various costs of added features. I am doing this though useState and Forms. The prevailing error i am getting with my useEffect calls it that i am attempting to access before initialization.

The desired formulas would take the input from the form, modify the price and display it at the bottom of the screen. Here is the entire function:

import React, { Fragment, useState, useEffect } from "react";

const ToolSelect = () => {
 const number = 0;
 const services = [];

 useEffect(() => {
  setPrice(0);
 }, []);

 useEffect(() => {
  if (type === "cash") {
   setPrice(number * 1.1);
  } else if (type === "accrual") {
   setPrice(number * 1.2);
  }
 }, [number, setPrice]);

 useEffect(() => {
  setClicked(true);
  if (plan === "starter") {
   setPrice(1000);
  } else if (plan === "essential") {
   setPrice(2000);
  }
 }, [number, setPrice]);

 useEffect(() => {
  if (service === "tp") {
   services.push(service);
   setPrice(number + 800);
  } else if (service === "pr") {
   services.push(service);
   setPrice(number + 1000);
  } else if (service === "entity") {
   services.push(service);
   setPrice(number + 300);
  } else if (service === "compliance") {
   services.push(service);
   setPrice(number + 2000);
  }
 }, [number, setPrice]);

 const [price, setPrice] = useState(0);
 const [plan, setPlan] = useState("");
 const [type, setType] = useState("");
 const [service, setService] = useState("");
 const [clicked, setClicked] = useState(false);

 const onChange = e => {
  setPrice({ ...price, [e.target.name]: e.target.value });
  setPlan({ ...plan, [e.target.name]: e.target.value });
  setType({ ...type, [e.target.name]: e.target.value });
  setService({ ...service, [e.target.name]: e.target.value });
 };

 const onSubmit = e => {
  e.preventDefault();
 };

 return (
  <Fragment>
   <div className='container bg-dark grid-3'>
    <div>
     <ul>
      <li className='card bg-success'>
       <p className='lead all-center'>Package Type</p>
      </li>
      <li className='card bg-success'>
       <p className='lead all-center'>Onboarding fee</p>
      </li>
      <li className='card bg-success py-2'>
       <p className='lead all-center'>Accounting Type</p>
      </li>
      <li className='card bg-success py-3'>
       <p className='lead all-center'>Additional Services</p>
      </li>
     </ul>
    </div>
    <div>
     <form onSubmit={onSubmit}>
      <ul>
       <li className='card bg-light'>
        <button
         onClick={() => setPlan("starter")}
         className='btn btn-primary btn-block'>
         Starter
        </button>
       </li>
       <li className='card bg-light'>
        <h3 className='lead all-center'>
         <span className={plan === "starter" ? "text-primary" : "text-dark"}>
          $1000
         </span>
        </h3>
       </li>
       <li className='card bg-light'>
        <h5 className='all-center'>1-20 Transactions Per Month</h5>
        <span className='text-center px-1'>
         <span className='text-center bg-success px-3'>
          <input
           type='radio'
           name='type'
           value='cash'
           checked={type === "cash"}
           onChange={onChange}
          />
          Cash{"   "}
         </span>
         <span className='text-center bg-danger px-3'>
          <input
           type='radio'
           value='accrual'
           name='type'
           checked={type === "accrual"}
           onChange={onChange}
          />
          Accrual
         </span>
        </span>
       </li>
       <li className='card bg-light'>
        <input
         type='checkbox'
         name='tp'
         checked={service === "tp"}
         onChange={onChange}
        />
        Tax Preparation{"  "}
        <input
         type='checkbox'
         name='service'
         value='pr'
         checked={service === "pr"}
         onChange={onChange}
        />
        Payroll {"  "}
        <br />
        <input
         type='checkbox'
         name='service'
         value='entity'
         checked={service === "entity"}
         onChange={onChange}
        />
        Entity Filings {"  "}
        <input
         type='checkbox'
         name='service'
         value='compliance'
         checked={service === "compliance"}
         onChange={onChange}
        />
        Compliance {"  "}
       </li>
      </ul>
     </form>
    </div>
    <div>
     <form onSubmit={onSubmit}>
      <ul>
       <li className='card bg-light'>
        <button
         onClick={() => setPlan("essential")}
         className='btn btn-danger btn-block'>
         Essential
        </button>
       </li>
       <li className='card bg-light'>
        <h3 className='lead all-center'>
         <span className={plan === "essential" ? "text-danger" : "text-dark"}>
          $2000
         </span>
        </h3>
       </li>
       <li className='card bg-light'>
        <h5 className='all-center'>20-100 Transactions Per Month</h5>
        <span className='text-center px-1'>
         <span className='text-center bg-success px-3'>
          <input
           type='radio'
           name='type'
           value='cash'
           checked={type === "cash"}
           onChange={onChange}
          />
          Cash{"   "}
         </span>
         <span className='text-center bg-danger px-3'>
          <input
           type='radio'
           name='type'
           value='accrual'
           checked={type === "accrual"}
           onChange={onChange}
          />
          Accrual
         </span>
        </span>
       </li>
       <li className='card bg-light'>
        <input
         type='checkbox'
         name='service'
         value='tp'
         checked={service === "tp"}
         onChange={onChange}
        />
        Tax Preparation{"  "}
        <input
         type='checkbox'
         name='service'
         value='pr'
         checked={service === "pr"}
         onChange={onChange}
        />
        Payroll {"  "}
        <br />
        <input
         type='checkbox'
         name='service'
         value='entity'
         checked={service === "entity"}
         onChange={onChange}
        />
        Entity Filings {"  "}
        <input
         type='checkbox'
         name='service'
         value='compliance'
         checked={service === "compliance"}
         onChange={onChange}
        />
        Compliance {"  "}
       </li>
      </ul>
     </form>
    </div>
   </div>
   <div className='container bg-dark grid-4'>
    <div className='card bg-success'>
     <p className='lead all-center'>One Time Fee</p>
    </div>
    <div className='card bg-light'>{price}</div>
   </div>
  </Fragment>
 );
};

export default ToolSelect;

Upvotes: 0

Answers (1)

Anurodh Singh

Reputation: 812

Just declare your state variables on the first line of the functional component because the useEffect also runs for the first and it didn't get any state variable and that is creating the error.

import React, { Fragment, useState, useEffect } from "react";

const ToolSelect = () => {

 const [price, setPrice] = useState(0);
 const [plan, setPlan] = useState("");
 const [type, setType] = useState("");
 const [service, setService] = useState("");
 const [clicked, setClicked] = useState(false);

 const number = 0;
 const services = [];

 useEffect(() => {
  setPrice(0);
 }, []);

 useEffect(() => {
  if (type === "cash") {
   setPrice(number * 1.1);
  } else if (type === "accrual") {
   setPrice(number * 1.2);
  }
 }, [number, setPrice]);

 useEffect(() => {
  setClicked(true);
  if (plan === "starter") {
   setPrice(1000);
  } else if (plan === "essential") {
   setPrice(2000);
  }
 }, [number, setPrice]);

 useEffect(() => {
  if (service === "tp") {
   services.push(service);
   setPrice(number + 800);
  } else if (service === "pr") {
   services.push(service);
   setPrice(number + 1000);
  } else if (service === "entity") {
   services.push(service);
   setPrice(number + 300);
  } else if (service === "compliance") {
   services.push(service);
   setPrice(number + 2000);
  }
 }, [number, setPrice]);

 const onChange = e => {
  setPrice({ ...price, [e.target.name]: e.target.value });
  setPlan({ ...plan, [e.target.name]: e.target.value });
  setType({ ...type, [e.target.name]: e.target.value });
  setService({ ...service, [e.target.name]: e.target.value });
 };

 const onSubmit = e => {
  e.preventDefault();
 };

 return (
  <Fragment>
   <div className='container bg-dark grid-3'>
    <div>
     <ul>
      <li className='card bg-success'>
       <p className='lead all-center'>Package Type</p>
      </li>
      <li className='card bg-success'>
       <p className='lead all-center'>Onboarding fee</p>
      </li>
      <li className='card bg-success py-2'>
       <p className='lead all-center'>Accounting Type</p>
      </li>
      <li className='card bg-success py-3'>
       <p className='lead all-center'>Additional Services</p>
      </li>
     </ul>
    </div>
    <div>
     <form onSubmit={onSubmit}>
      <ul>
       <li className='card bg-light'>
        <button
         onClick={() => setPlan("starter")}
         className='btn btn-primary btn-block'>
         Starter
        </button>
       </li>
       <li className='card bg-light'>
        <h3 className='lead all-center'>
         <span className={plan === "starter" ? "text-primary" : "text-dark"}>
          $1000
         </span>
        </h3>
       </li>
       <li className='card bg-light'>
        <h5 className='all-center'>1-20 Transactions Per Month</h5>
        <span className='text-center px-1'>
         <span className='text-center bg-success px-3'>
          <input
           type='radio'
           name='type'
           value='cash'
           checked={type === "cash"}
           onChange={onChange}
          />
          Cash{"   "}
         </span>
         <span className='text-center bg-danger px-3'>
          <input
           type='radio'
           value='accrual'
           name='type'
           checked={type === "accrual"}
           onChange={onChange}
          />
          Accrual
         </span>
        </span>
       </li>
       <li className='card bg-light'>
        <input
         type='checkbox'
         name='tp'
         checked={service === "tp"}
         onChange={onChange}
        />
        Tax Preparation{"  "}
        <input
         type='checkbox'
         name='service'
         value='pr'
         checked={service === "pr"}
         onChange={onChange}
        />
        Payroll {"  "}
        <br />
        <input
         type='checkbox'
         name='service'
         value='entity'
         checked={service === "entity"}
         onChange={onChange}
        />
        Entity Filings {"  "}
        <input
         type='checkbox'
         name='service'
         value='compliance'
         checked={service === "compliance"}
         onChange={onChange}
        />
        Compliance {"  "}
       </li>
      </ul>
     </form>
    </div>
    <div>
     <form onSubmit={onSubmit}>
      <ul>
       <li className='card bg-light'>
        <button
         onClick={() => setPlan("essential")}
         className='btn btn-danger btn-block'>
         Essential
        </button>
       </li>
       <li className='card bg-light'>
        <h3 className='lead all-center'>
         <span className={plan === "essential" ? "text-danger" : "text-dark"}>
          $2000
         </span>
        </h3>
       </li>
       <li className='card bg-light'>
        <h5 className='all-center'>20-100 Transactions Per Month</h5>
        <span className='text-center px-1'>
         <span className='text-center bg-success px-3'>
          <input
           type='radio'
           name='type'
           value='cash'
           checked={type === "cash"}
           onChange={onChange}
          />
          Cash{"   "}
         </span>
         <span className='text-center bg-danger px-3'>
          <input
           type='radio'
           name='type'
           value='accrual'
           checked={type === "accrual"}
           onChange={onChange}
          />
          Accrual
         </span>
        </span>
       </li>
       <li className='card bg-light'>
        <input
         type='checkbox'
         name='service'
         value='tp'
         checked={service === "tp"}
         onChange={onChange}
        />
        Tax Preparation{"  "}
        <input
         type='checkbox'
         name='service'
         value='pr'
         checked={service === "pr"}
         onChange={onChange}
        />
        Payroll {"  "}
        <br />
        <input
         type='checkbox'
         name='service'
         value='entity'
         checked={service === "entity"}
         onChange={onChange}
        />
        Entity Filings {"  "}
        <input
         type='checkbox'
         name='service'
         value='compliance'
         checked={service === "compliance"}
         onChange={onChange}
        />
        Compliance {"  "}
       </li>
      </ul>
     </form>
    </div>
   </div>
   <div className='container bg-dark grid-4'>
    <div className='card bg-success'>
     <p className='lead all-center'>One Time Fee</p>
    </div>
    <div className='card bg-light'>{price}</div>
   </div>
  </Fragment>
 );
};

export default ToolSelect;

Upvotes: 1

useState initialization error in react js

Answers (1)

Related Questions