here is my react code for storing in state

i am trying to create a payroll field in which when i click on annual and submit the value into input then automatically another input field like basic and hra should get value according to formula e.g.=> monthly = annual / 12 and basic = (monthly/100)*50

const PayrollHr = () => {
// 1. here i am using hook to store data
const [payroll, setPayroll] = useState({
    annual: '',
    monthly: '',
    basic: '',
    hra: '',
    fixedAllowance: '',
    variableAllowance: '',
    employerShare: '',
    statutoryBonus: ''
});  

    const addPayroll = async (e) => {
        e.preventDefault();
        // let token = localStorage.getItem('token');
        // let decoded = jwt_decode(token);
        // let email = decoded.email;
        const response = await fetch('http://localhost:8000/hr/payroll', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                // "Authorization": `Bearer ${token}`
            },
            body: JSON.stringify({
                annual: payroll.annual,
                monthly: payroll.annual / 12,
                basic: payroll.basic,
                hra: payroll.hra,
                fixedAllowance: payroll.fixedAllowance,
                variableAllowance: payroll.variableAllowance,
                employerShare: payroll.employerShare,
                statutoryBonus: payroll.statutoryBonus,
                // email: email
            })
        })
            const data = await response.json();
        console.log(" payroll", data);
        
    }

here is my react code for storing in state

    >here is my input field
    >in input field i want to do some math operatios like ( 50% of salary = basic 
salary)

 return (
    <div className='payroll_main'>
        <div>
            <form onSubmit={addPayroll}>
                <div className='form-group' >
    /// here i m trying to do some math operations like 50% of annual is basic salary
                    <input type='text' className='form-control' id='annual'
                        onChange={(e) => setPayroll({ ...payroll, annual: e.target.value })}
                        placeholder='Annual' />
                    <input type='text' className='form-control' id='monthly'
                        onChange={(e) => setPayroll({ ...payroll.annual / 12, monthly: e.target.value })}
                        value={payroll.monthly}
                        placeholder='Monthly' />
                    <input type='text' className='form-control' id='basic'
                        onChange={(e) => setPayroll({ ...payroll, basic: e.target.value })}
                        // value={(payroll.monthly / 100) * 50}
                        placeholder='Basic' />
                    <input type='text' className='form-control' id='hra'
                        onChange={(e) => setPayroll({ ...payroll, hra: e.target.value })}
                        placeholder='HRA' />
                    <input type='text' className='form-control' id='fixedAllowance'
                        onChange={(e) => setPayroll({ ...payroll, fixedAllowance: e.target.value })}
                        placeholder='Fixed Allowance' />
                    
                     <button type='submit' className='btn btn-primary'>Add</button>
                </div>
            </form>
        </div>
    </div>
)
 }

        export default PayrollHr

CodePudding user response：

You can modify function, which you are using for handling onChange event to modify more fields than one. For example if you want to change monthly and basic based on annual field you can use something like this:

<input
    type='text'
    className='form-control'
    id='annual'
    onChange={(e) => {
      const annual = e.target.value;
      const monthly = annual / 12;
      const basic = (monthly / 100) * 50;

      setPayroll({
        ...payroll,
        annual,
        monthly,
        basic
      })
    }
    placeholder='Annual'
/>

Then in other input fields you just need to set correct value prop. Just like you already have in monthly input

<input
  type='text'
  className='form-control'
  id='monthly'
  value={payroll.monthly}
  placeholder='Monthly'
/>

I would also consider disabling those fields since their value is set based on annual.

CodePudding user response：

you can use useRef for this and refer tha one value into other value. It could help you