here i m trying to add function in which monthly, basic and hra value already substracted by some formula

but in netSalary i want to sum of all value when i fill all input

    const onChange = (e) => {
    const annual = e.target.value;
    const monthly = Math.round((annual / 12)); // Math.round(annual / 12);
    const basic = Math.round((monthly / 100) * 50); // 50% of monthly
    const hra = Math.round((basic / 100) * 50); // 50% of basic

  //but below code is not doing same thing like sum 

    const fixedAllowance = e.target.value; // 10% of basic
    const variableAllowance = e.target.value; // 10% of basic
    const employerShare = e.target.value; // 10% of basic
    const statutoryBonus = e.target.value; // 10% of basic
    const netSalary = Math.round((basic   hra   payroll.employerShare   payroll.fixedAllowance   payroll.variableAllowance   payroll.statutoryBonus));
    setPayroll({
        ...payroll,
        annual,
        monthly,
        basic,
        hra,
        netSalary
    })

}

here is input field
and i want to auto focus on field when component load

here is my return code in which i m trying to post my data through fetch api and trying to get all sum value automatically

     return (
    <div className='payroll_main_container'>
        <form onSubmit={addPayroll}>
            <div className='form_group'>
                <label>Annual Salary</label>
                <input type='text' className='form-control' id='annual'
                    onChange={onChange}
                    ref={ref}
                    onFocus={() => {
                        ref.current.select();
                    }}
                    placeholder='Annual' />
                <label>Monthly Salary</label>
                <input type='text' className='form-control' id='monthly'
                    defaultValue={payroll.monthly}
                    placeholder='Monthly' />
                <label>Basic Salary</label>
                <input type='text' className='form-control' id='basic'
                    defaultValue={payroll.basic}
                    placeholder='Basic' />
                <label>HRA</label>
                <input type='text' className='form-control' id='hra'
                    defaultValue={payroll.hra}
                    placeholder='HRA' />
                <label>Fixed Allowance</label>
                <input type='text' className='form-control' id='fixedAllowance'
                    onChange={(e) => setPayroll({ ...payroll, fixedAllowance: e.target.value })}
                    defaultValue={payroll.fixedAllowance}
                    placeholder='Fixed Allowance' />
                <label>Variable Allowance</label>
                <input type='text' className='form-control' id='variableAllowance'
                    onChange={(e) => setPayroll({ ...payroll, variableAllowance: e.target.value })}
                    defaultValue={payroll.variableAllowance}
                    placeholder='Variable Allowance' />
                <label>Employer Share</label>
                <input type='text' className='form-control' id='employerShare'
                    onChange={(e) => setPayroll({ ...payroll, employerShare: e.target.value })}
                    defaultValue={payroll.employerShare}
                    placeholder='Employer Share' />
                <label>Statutory Bonus</label>
                <input type='text' className='form-control' id='statutoryBonus'
                    onChange={(e) => setPayroll({ ...payroll, statutoryBonus: e.target.value })}
                    defaultValue={payroll.statutoryBonus}
                    placeholder='Statutory Bonus' />
                <label>Net Salary</label>
                <input type='text' className='form-control' id='netSalary'
                    defaultValue={payroll.netSalary}
                    placeholder='Net Salary' />

                <button type='submit' className='btn btn-primary' onClick={() => setPayroll(payroll)}>Add</button>
            </div>
        </form>
    </div>
)

CodePudding user response：

You must show what result you get for netSalary and other values.
I think The result of e.target.value is string and you should consider using Number(value) for that.

CodePudding user response：

Agree with Ali, You must check type for each e.target.value.

use below function:

const checkIsNumber = (x) => {
   if (isNaN(x)) {
     return 0;
   }
 return Number(x);
}

Usage:

checkIsNumber(e.target.value);