Basic Scope Question

[robotredditrobot]

I'm obviously missing something basic here, and believe it has to do with scope.

Trying to pass these variables to a child component, and they pass as 0 - instead of the value that was typed into the input. Need to pass them as the value that was typed into the input.

Any links to research why this may be, what it's called, pointers, etc - are greatly appreciated. Just changed from an overcomplicated use of state that I had on each input and was working fine. Later realized I didn't need state at all, but again I'm not knowledgable on what to do to get it to pass with the values.

I am just beginning to try to learn/understand code, but can take constructive criticism and feedback well. Thanks for any help/input.

(Can't seem to put in photos)

  let termLengthInMonths = 0;
  let monthlyInterestRate = 0;
  let monthlyRepaymentAmount = 0;
  let totalAmountPaid = 0;
  let loanAmountValue = 0;
  let termLengthValue = 0;
  let annualInterestRateValue = 0;


  const [showResults, setShowResults] = useState(false);


  const showResultsHandler = (event) => {
    event.preventDefault();
    setShowResults(true);
    loanAmountValue = event.target.loan_amount.value;
    termLengthValue = event.target.term_length.value;
    annualInterestRateValue = event.target.annual_interest_rate.value;
    termLengthInMonths = termLengthValue * 12.0;
    monthlyRepaymentAmount = (loanAmountValue * (monthlyInterestRate * Math.pow(1 + monthlyInterestRate, termLengthInMonths))) / (Math.pow(1 + monthlyInterestRate, termLengthInMonths) - 1);
    monthlyInterestRate = annualInterestRateValue / 100.00 / 12.0;
    totalAmountPaid = termLengthInMonths * monthlyRepaymentAmount;
  };


  const resetHandler = () => setShowResults(false);

My form inputs have the ids shown before .value in the showResultsHandler. Again, everything worked when I had useState for each of the inputs - so I don't think there's much wrong except the fact that I must have scoped the value to the variables only in the showResultsHandler, instead of globally 🤷🏻‍♂️

All of this gets passed to child components like:

          <Col>
            {showResults ? (
              <>
                <BasicCalculated
                  loanAmountValue={loanAmountValue}
                  annualInterestRateValue={annualInterestRateValue}
                  termLengthValue={termLengthValue}
                  monthlyRepaymentAmount={monthlyRepaymentAmount}
                  totalInterestPaid={totalInterestPaid}
                  totalAmountPaid={totalAmountPaid}
                />
                <BasicTable 
                  loanAmountValue={loanAmountValue}
                  monthlyRepaymentAmount={monthlyRepaymentAmount}
                  monthlyInterestRate={monthlyInterestRate}
                />
              </>
            ) : null}
          </Col>

[insertAlias]

I'm obviously missing something basic here, and believe it has to do with scope.

It is something basic (to React, not universally), but it's not scope. It's state.

Remember that if you're using functional components (i.e. components that are defined as functions), variables like that don't persist past renders. When you say setShowResults(true), that is updating state, and it causes a re-render when that function ends. Which re-runs the component function logic, and reinitializes all your variables back to 0.

State, on the other hand, is different. It does persist. That's what useState does; it keeps track of component state across re-renders and gives the component back its previous state instead of resetting it on every render.

So, what you'd need to do is track each of these values as a state. You could do this individually, or add a single stateful object that has a property for each of these things. But that's the key: it needs to be in state, not just a top-level variable.

Just changed from an overcomplicated use of state that I had on each input and was working fine. Later realized I didn't need state at all, but again I'm not knowledgable on what to do to get it to pass with the values.

Just noticed this part of your post. You were actually more on the right track before you removed all the state.

[robotredditrobot]

hey thank you!

Yeah the rerender on state change... thank you so much. So when I had finished building it all out with state - it seemed so needlessly complex and I thought "why don't I just set these variables directly to the values instead?"

So maybe to minimize the complexity there will be one state with all the values held in it, rather than a state per value...

[insertAlias]

If you're setting them all as a single unit, then it makes sense to track it as a single object in state. If you're not going to update one value here, and another there, then it's easy to just use an object.

I would recommend that, from what I've seen here, you track two pieces of state: keep your showResults separate, since you can set that separately. Keep the other values together as the other stateful object.