React JS how to interconnect input form

user_14166920 0
Viewed 85

I'm creating a web app similar to a classic peer-2-peer lending platform. In the form to publish the loan request, I connected a slider to the input in which to enter the requested amount. However, I have two problems: the slider is set with a minimum of $ 100 and a maximum of $ 1000. I am attaching two screen to better understand: Before compiling Amount >$1000 By continuing to fill in the form, if you enter an amount greater than that allowed, the default value becomes the previous one, I would like it to be the maximum, that is $ 1000 Furthermore, I would like that the tenor also affects the interest rate, the more time you pay off the loan, the more the interest increases. At the default value of the tenor, ie 6 months, no change. For each increase + 2% and for each decrease -2%. All these data are then saved in the MySQL table.

Codesandbox: https://codesandbox.io/s/priceless-gould-30uuf?file=/src/App.js

reactjs forms input mysql
1 Answers

You can bound the entered loan size value between the min and max values, Math.max(MIN_VALUE, Math.min(value, MAX_VALUE). Compute the new value and update both the slider and tutorial state.

const handleSizeBlur = (value) => {
  const newValue = Math.max(MIN_VALUE, Math.min(Number(value), MAX_VALUE));
  setSizeInputText(newValue);
  setTutorial(tutorial => ({ ...tutorial, size: newValue }));
};

For adding a percentage to the interest rate based on tenor then I suggest to make the option values of [1, 3, 6, 8, 10, 12] months be [-4, -2, 0, 2, 4, 6] percent respectively, with 0 being the default tenor value.

const initialTutorialState = {
  ...
  tenor: 0, // <-- initialize to 0 (6 months)
  ...
};

...

// Use an effect to update the interest value when size or tenor update
useEffect(() => {
  const interest = `${
    Math.ceil(tutorial.size * X_FACTOR) + Number(tutorial.tenor)
  }%`;

  setTutorial((tutorial) => ({ ...tutorial, interest }));
}, [tutorial.size, tutorial.tenor]);

...

<TextField
  id="standard-read-only-input"
  label="Interest rate"
  defaultValue="25%"
  value={tutorial.interest} // <-- display the interest value from state
  InputProps={{
    readOnly: true
  }}
/>

...

<TextField
  ...
  value={`${
    Math.ceil(tutorial.size * X_FACTOR) +
    Number(tutorial.tenor) // <-- add tenor to computed interest rate
  }%`}
  ...
/>

...

<Form.Control
  ...
  defaultValue={0}
  ...
>
  <option value={-4}>1 month</option> // <-- define tenor select values
  <option value={-2}>3 months</option>
  <option value={0}>6 months</option>
  <option value={2}>8 months</option>
  <option value={4}>10 months</option>
  <option value={6}>12 months</option>
</Form.Control>

Edit react-js-how-to-interconnect-input-form

user_86908570
Related