0

I want to use Cleave js for currency format. My Cleave tag looks like this:

<Cleave className="input-numeral" 
        name="loanAmount"
        options={{  numeral:            true,
                    numeralDecimalMark: ',',
                    delimiter:          '.' 
                }}
        value={this.props.loanAmount} 
        onChange={this.props.handleChange}
 />

Suppose if the input is 82456.56

I want output something like this: 82.456,56. The code is working fine if I do not use 'value' prop in this. But I need to use value as I need the initial value from the props in formatted way.

What shall I do in this case to read the value from props initially and then to change it according to the user input?

Rachit Gupta
  • 89
  • 1
  • 2
  • 8

1 Answers1

-1

You might want to try something like this:

class SampleComponent extends React.Component{
  constructor(props){
    super(props);
    this.onChange = this.onChange.bind(this);
    this.state = {
        value : props.loanAmount
    };
}

onChange(event) {
    this.setState({
        value: event.target.value
    });
    this.props.handleChange();
}

render() {
    return <Cleave className="input-numeral" 
            name="loanAmount"
            options={{  numeral:            true,
                        numeralDecimalMark: ',',
                        delimiter:          '.' 
                    }}
            value={this.state.value} 
            onChange={this.onChange}
    />
}

}

Sagar More
  • 466
  • 2
  • 8
  • This is working fine for this option: options={{numeral: true, numeralThousandsGroupStyle: 'thousand'}}, but not for the above mentioned options. For the above mentioned option it works if I input new value to it, but not working for the initial value from the props. If the value from props is 42342.43, output is 4.234.243 rather than 42.342,43 – Rachit Gupta Jan 06 '20 at 15:00
  • have you done the steps, I have done in `constructor` ? – Sagar More Jan 06 '20 at 15:14
  • Yes, I followed exactly the same and now it is working for options={{numeral: true, numeralThousandsGroupStyle: 'thousand'}}, but not for options={{ numeral: true, numeralDecimalMark: ',', delimiter: '.' }} – Rachit Gupta Jan 06 '20 at 15:22