How do I use value in Cleave JS react

Question

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?

Answer 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}
    />
}

}