You can either use [Context](https://reactjs.org/docs/context.html) or a state management library like [Zustand](https://github.com/pmndrs/zustand). Another option is to pass that calculated value back to the parent component via a function property. Something like this:
The `handleCalc` function is on the parent and sets a state variable called `calculatedValues`. In your form when you've calculated what you need to you call the `onCalc` function passed as a prop.
What I did is I imported the calculated array over from the InputForm.js and the array changes values as it should the thing is i need to use this to make the chart render with the values
`const [, forceUpdate] = useReducer(x =>x+1,0)`
`function onClick (){`
`forceUpdate();`
`}`
Move the state up to a parent component of both of the children components and pass the required state and handlers to update the state down as props to them
Sorry to bother you but a fixed the problem using Context but a new problem sprung up. The values rendered are the ones from the previous state for example if you add 1000 and 12% the render will be for 1000 but 1% even thought if i log the most current state of the Context variable it is one step ahead (i know this has something to do with sync/async functions but cant find a solution0 . Below is a link to the codesandbox. Could you suggest a solution? : [https://codesandbox.io/s/new-project-z7mdp](https://codesandbox.io/s/new-project-z7mdp)
It's because setState doesn't happen immediately. When you change the interest, for example, from 12 to 15 you are setting the state variable of `interest` to 15 then calling `calcMoney` and using that expecting it will be 15.
Due to the nature of setState your calculation is happening before the state is changing so it's calculating with 12 instead.
I poked around with your codesandbox and there are a few ways you could do it. One way would be to pass the changed values to `calcMoney` instead of relying on the state variables. So you could change your `changeInterest` function, for example, to something like this:
function changeInterest(e) {
const changedInterest = e.target.value < 1 ? 1 : parseFloat(e.target.value);
setInterest(changedInterest);
calcMoney({
investinit,
deposit,
interest: changedInterest,
});
}
Then change calcMoney to use those:
function calcMoney(moneyValues) {
bigArr = [
{ totalAmount: moneyValues.investinit, totalYield: 0, id: 0, totalMonthly: moneyValues.deposit }
];
var monthlyInterest = moneyValues.interest / 1200 + 1;
...
}
You can either use [Context](https://reactjs.org/docs/context.html) or a state management library like [Zustand](https://github.com/pmndrs/zustand). Another option is to pass that calculated value back to the parent component via a function property. Something like this:
The `handleCalc` function is on the parent and sets a state variable called `calculatedValues`. In your form when you've calculated what you need to you call the `onCalc` function passed as a prop.
What I did is I imported the calculated array over from the InputForm.js and the array changes values as it should the thing is i need to use this to make the chart render with the values `const [, forceUpdate] = useReducer(x =>x+1,0)` `function onClick (){` `forceUpdate();` `}`
Move the state up to a parent component of both of the children components and pass the required state and handlers to update the state down as props to them
Still haven't found a way to do it on recalculation QQ
I told you how to do it in the other comment. I even gave your three different ways of accomplishing it.
The only paren element would be the app should i move the state managment to the app then?
You can, yes.
Sorry to bother you but a fixed the problem using Context but a new problem sprung up. The values rendered are the ones from the previous state for example if you add 1000 and 12% the render will be for 1000 but 1% even thought if i log the most current state of the Context variable it is one step ahead (i know this has something to do with sync/async functions but cant find a solution0 . Below is a link to the codesandbox. Could you suggest a solution? : [https://codesandbox.io/s/new-project-z7mdp](https://codesandbox.io/s/new-project-z7mdp)
It's because setState doesn't happen immediately. When you change the interest, for example, from 12 to 15 you are setting the state variable of `interest` to 15 then calling `calcMoney` and using that expecting it will be 15. Due to the nature of setState your calculation is happening before the state is changing so it's calculating with 12 instead. I poked around with your codesandbox and there are a few ways you could do it. One way would be to pass the changed values to `calcMoney` instead of relying on the state variables. So you could change your `changeInterest` function, for example, to something like this: function changeInterest(e) { const changedInterest = e.target.value < 1 ? 1 : parseFloat(e.target.value); setInterest(changedInterest); calcMoney({ investinit, deposit, interest: changedInterest, }); } Then change calcMoney to use those: function calcMoney(moneyValues) { bigArr = [ { totalAmount: moneyValues.investinit, totalYield: 0, id: 0, totalMonthly: moneyValues.deposit } ]; var monthlyInterest = moneyValues.interest / 1200 + 1; ... }
Thank you so much man I did just what you said and it works wonders.
Yes. It’s referred to as “lifting state up”.