0
218
ViewsReact: Formatted Number Maximum Percentage
I have a custom component, that displays a percentage value.
I want to restrict this to max. 10 %, my custom prop has this value as "Rate".
How can I achieve this?
FormattedNumber has no property for this.
SetSupplements Custom Component
<Col span={4}>
<SetSupplementsRate
rateName="CapitalisationRate"
buttonLabel={t(
'reservationcalculator.reservecalculation.addendum.treatmentcosts.capitalization'
)}
modalTitle={t(
'reservationcalculator.reservecalculation.capitalization.selectcapitalization'
)}
rate={CapitalisationRate}
/>
</Col>
actual component
<div data-testid="SetSupplementsRateComponent">
{!!buttonLabel && <div className="strong">{`${buttonLabel}:`}</div>}
<Button
className="SetSupplementsRateButton"
onClick={() => setModalVisible(true)}
data-testid="SetSupplementsRateButton"
disabled={loading}
>
<FormattedNumber value={rate} minDecimals={1} percentage />
</Button>
<Modal
visible={modalVisible}
footer={null}
onCancel={() => setModalVisible(false)}
title={modalTitle}
>
<SetSupplementsRateForm
rateName={rateName}
initialValues={{ Rate: rate }}
onSubmit={onSubmit}
/>
</Modal>
</div>
I don't want to modify the actual component because I only want to restrict one field!
·
Juan Pablo Isaza
1 answers
Answer question0
Have you tried to conditionally pass a prop value.
the code should look something like this
<FormattedNumber value={rate < 10 ? rate : 10} minDecimals={1} percentage />
Alternative solution- minor adjustments to the FormattedNumber component
import React, { useState, useEffect } from 'react';
import './style.css';
const FormattedNumber = ({ rate, isRestricted }) => {
const [value, setValue] = useState(rate);
useEffect(() => {
if (isRestricted) {
if (rate < 10) {
setValue(rate);
}
}
}, []);
const handleChange = (e) => {
if (e.target.value < 10 && isRestricted) {
setValue(e);
}
};
return (
<div>
<input type="text" value={value} onChange={handleChange} />
</div>
);
};
const rate = 12;
export default function App() {
return (
<div>
<FormattedNumber rate={rate < 10 ? rate : 10} isRestricted /> // values less than 10
<FormattedNumber rate={rate < 10 ? rate : 10} /> // can take any value
</div>
);
}
·
Juan Pablo Isaza
Report
Answer question