How to concatenate numaric code and string inside TextInput value using React Native

Question

There are two variables like.

this.state={Amount=50, CurrencySymbol="₹"}

TextInput Render

<TextInput value={this.state.CurrencySymbol + " " + this.state.Amount.toString()} editable={false}></TextInput>

but the Currency symbol is not showing.

Is there any way to print the currency symbol dynamically inside TextInput

Answer 1

You're assigning state values in the wrong way. This should be like:

this.state = {
  Amount: 50,
  CurrencySymbol: "\u0024"
}

• \u20B9 is used for rupee.
• \u0024 is used for dollar.

And there is no state named TAmount in your states. You wrote this.state.TAmount.toString(). It should be this.state.Amount.toString().

<TextInput value={this.state.CurrencySymbol + " " + this.state.Amount.toString()} editable={false}></TextInput>

Update

Since you've HTML currency symbols, so you can save this by this way into your state:

this.state = {
  Amount: 50,
  CurrencySymbol: "₹",
  CurrencySymbols: {
    "₹": "\u20B9",
    "€": "\u20AC",
    "$": "\u0024"
  }
}

// Then use it on like this
<TextInput value={this.state.CurrencySymbols[this.state.CurrencySymbol] + " " + this.state.Amount.toString()} editable={false}></TextInput>

This can be the easiest way you would able to solve your problem I guess.

You can't use HTML like symbols in react native except in react-native-webview.

That's it.