Input box losing focus, caught in re-render loop - input

Question

I've read the previous posts about similar problems and I have added as much as possible as per the suggestions( keys etc, onFocus(only works on a single input)), unfortunately, my react knowledge is insufficient to fix the issue.
The input boxes are losing focus when a single character is typed, a re-render of the component is happening( I think) I can continue to input in the boxes(clicking into the inputs every time calculator working) and the outcomes and sums all work as expected.
Any help would be very much appreciated
Thank you
import { Table, THead, Tr, Th, TBody, Td } from '#twilio-paste/core/table'
import { Text } from '#twilio-paste/text';
import { Input } from '#twilio-paste/core/input';
import { Label } from '#twilio-paste/core/label';
import { styled } from '#twilio-paste/styling-library';
import { Box } from '#twilio-paste/core/box'
const StyledCheckboxContainer = styled(Box)`
> * {
width: 50%;
margin-bottom: 8px;}`
const StyledColumn = styled.div`
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
margin-left: 8px;
margin-right: 8px; `
const StyledText = styled.div`
font-size: 12px;
color: #606B85;`
const StyledInputContainer = styled.div`
margin-bottom: 24px;`
export default function BudgetCalculator() {
const [monthlyAmount, setMonthlyAmount] = useState(0);
const [interestRate, setInterestRate] = useState(0);
const [deposit, setDeposit] = useState(0);
const [feeAtStart, setFeeAtStart] = useState(0);
const [feeAtEnd, setFeeAtEnd] = useState(0);
var decimalInterest = 1 + (interestRate / 100)
var monthlyAPR = ((decimalInterest) ** (1 / 12)) - 1
function annuityCalculation(monthDynamicArr: number) {
var total = monthlyAmount * ((1 - (1 + monthlyAPR) ** -(monthDynamicArr))) / monthlyAPR
return total
}
let monthsArr = [12, 24, 30, 36, 42, 48, 54, 60]
let monthDynamicArr = monthsArr.map(month => {
return annuityCalculation(month)
})
let totalWithFee = monthDynamicArr.map(month => (month + +feeAtEnd) - feeAtStart)
let totalWithDeposit = totalWithFee.map(month => month + +deposit)
const InputBoxes = () => {
return (
<StyledColumn>
<StyledInputContainer>
<Label required htmlFor="monthly_budget">Monthly Budget</Label>
<Input
key="monthly_budget"
type="number"
value={`${monthlyAmount}`}
onChange={(e) => setMonthlyAmount(parseInt(e.target.value) || 0)}
placeholder="0"
insertBefore={<Text as="span" fontWeight="fontWeightSemibold">£</Text>}
/>
</StyledInputContainer>
<StyledInputContainer>
<Label required htmlFor="apr">APR</Label>
<Input
key="apr"
type="number"
value={`${interestRate}`}
onChange={(e) => setInterestRate(parseInt(e.target.value) || 0)}
placeholder="0"
insertAfter={<Text as="span" fontWeight="fontWeightSemibold">%</Text>}
/>
</StyledInputContainer>
<StyledInputContainer>
<Label htmlFor="deposit">Deposit</Label>
<Input type="number"
key="deposit"
value={`${deposit}`}
onChange={(e) => setDeposit(parseInt(e.target.value) || 0)}
placeholder="0"
insertBefore={<Text as="span" fontWeight="fontWeightSemibold">£</Text>}
/>
</StyledInputContainer>
<StyledInputContainer>
<Label htmlFor="fee_at_start">Fee at start</Label>
<Input
key="fee_at_start"
type="number"
value={`${feeAtStart}`}
onChange={(e) => setFeeAtStart(parseInt(e.target.value) || 0)}
placeholder="0"
insertBefore={<Text as="span" fontWeight="fontWeightSemibold">£</Text>}
/>
</StyledInputContainer>
<StyledInputContainer>
<Label htmlFor="fee_at_end">Fee at end</Label>
<Input key="fee_at_end"
type="number"
value={`${feeAtEnd}`}
onChange={(e) => setFeeAtEnd(parseInt(e.target.value) || 0)}
placeholder="0"
insertBefore={<Text as="span" fontWeight="fontWeightSemibold">£</Text>}
/>
</StyledInputContainer>
</StyledColumn>
);
}
const tableMonths = monthsArr.map((month) => {
return (
<Tr>
<Td key={"months"}>
{month} months
</Td>
</Tr>
)
})
const tableLoan = totalWithFee.map((money) => {
return (
<Tr>
<Td key={"fee"}>
£ {money.toFixed(2)}
</Td>
</Tr>
)
})
const tableDeposit = totalWithDeposit.map((money) => {
return (
<Tr>
<Td key={"totalDeposit"}>
£ {money.toFixed(2)}
</Td>
</Tr>
)
})
const TableExample = () => {
return (
<StyledColumn>
<Table>
<THead>
<Tr>
<Th>Term</Th>
<Th>Loan</Th>
<Th>Total</Th>
</Tr>
</THead>
<TBody>
<Td>
<Tr>
{tableMonths}
</Tr>
</Td>
<Td>
<Tr>
{tableLoan}
</Tr>
</Td>
<Td>
<Tr>
{tableDeposit}
</Tr>
</Td>
</TBody>
</Table>
</StyledColumn >
)
}
return (
<>
<StyledCheckboxContainer
display="flex"
flexWrap="wrap"
>
<InputBoxes />
<TableExample />
</StyledCheckboxContainer>
<StyledText>
Approximate
</StyledText>
</>
)
}

Answer 1

The issue here is that you are creating InputBoxes component each render. Since this is a new component reference it unmounts any previously existing version and mounts the new version. This is why the input focus is lost.
Don't declare React components inside the function component body of another React component.
The path of least resistance is to rename InputBoxes to inputBoxes and declare it as a JSX literal instead of as a React component.
const inputBoxes = (
<StyledColumn>
<StyledInputContainer>
<Label required htmlFor="monthly_budget">
Monthly Budget
</Label>
<Input
...
/>
</StyledInputContainer>
<StyledInputContainer>
<Label required htmlFor="apr">
APR
</Label>
<Input
...
/>
</StyledInputContainer>
<StyledInputContainer>
<Label htmlFor="deposit">Deposit</Label>
<Input
...
/>
</StyledInputContainer>
<StyledInputContainer>
<Label htmlFor="fee_at_start">Fee at start</Label>
<Input
...
/>
</StyledInputContainer>
<StyledInputContainer>
<Label htmlFor="fee_at_end">Fee at end</Label>
<Input
...
/>
</StyledInputContainer>
</StyledColumn>
);
...
return (
<>
<StyledCheckboxContainer display="flex" flexWrap="wrap">
{inputBoxes}
<TableExample />
</StyledCheckboxContainer>
<StyledText>Approximate</StyledText>
</>
);
The alternative would be to keep InputBoxes a component and declare it outside BudgetCalculator and pass all the values/callbacks in as props.
Example:
const InputBoxes = ({
monthlyAmount,
setMonthlyAmount,
interestRate,
setInterestRate,
deposit,
setDeposit,
feeAtStart,
setFeeAtStart,
feeAtEnd,
setFeeAtEnd
}) => {
return (
<StyledColumn>
<StyledInputContainer>
<Label required htmlFor="monthly_budget">
Monthly Budget
</Label>
<Input
...
/>
</StyledInputContainer>
<StyledInputContainer>
<Label required htmlFor="apr">
APR
</Label>
<Input
...
/>
</StyledInputContainer>
<StyledInputContainer>
<Label htmlFor="deposit">Deposit</Label>
<Input
...
/>
</StyledInputContainer>
<StyledInputContainer>
<Label htmlFor="fee_at_start">Fee at start</Label>
<Input
...
/>
</StyledInputContainer>
<StyledInputContainer>
...
/>
</StyledInputContainer>
</StyledColumn>
);
};
function BudgetCalculator() {
...
return (
<>
<StyledCheckboxContainer display="flex" flexWrap="wrap">
<InputBoxes
{...{
monthlyAmount,
setMonthlyAmount,
interestRate,
setInterestRate,
deposit,
setDeposit,
feeAtStart,
setFeeAtStart,
feeAtEnd,
setFeeAtEnd
}}
/>
<TableExample />
</StyledCheckboxContainer>
<StyledText>Approximate</StyledText>
</>
);
}