Question

0

160

Views

React: 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!

over 3 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-11T12:24:34.473Z

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>
  );
}

0

160

React: Formatted Number Maximum Percentage

1 answers

0

Find remote jobs

Andres GPT