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

Question

There are two variables like.

this.state={Amount=50, CurrencySymbol="&#x20B9;"}

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

Current output is [₹ 50] but i want to show [₹ 50] – vicky Jul 14 '20 at 08:50 — vicky, Jul 14 '20 at 08:50

Shahnawaz Hossan · Accepted Answer · 2020-07-14T09:47:42.683

0

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: "&#x20B9;",
  CurrencySymbols: {
    "&#x20B9;": "\u20B9",
    "&#x20AC;": "\u20AC",
    "&#x0024;": "\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.

edited Jul 14 '20 at 09:47

answered Jul 14 '20 at 07:33

Shahnawaz Hossan

2,695
2
13
24

I had changed the TAmount to Amount. my issue is not with amount. my issue with symbol code. i want to show the character of symbol using its code inside the TextInput – vicky Jul 14 '20 at 08:48
@vicky, I've updated my answer. If you would like to use currency symbol from the character, you need to use this way I've updated into my answer in the state's `CurrencySymbol`. `\u0024` this character is for `$`. – Shahnawaz Hossan Jul 14 '20 at 08:53
Here are the [currency symbols](https://aboutreact.com/react-native-currency-symbols/) for react native. – Shahnawaz Hossan Jul 14 '20 at 09:00
I am looking a solution with HTML character. i can not change api response. – vicky Jul 14 '20 at 09:19
How many symbols you would like to show, I can give an alternative solution to this. – Shahnawaz Hossan Jul 14 '20 at 09:29
@vicky, I've added an alternative solution to your problem. Have a look at that. – Shahnawaz Hossan Jul 14 '20 at 09:49
There is not possible to map every character. – vicky Jul 21 '20 at 08:43
You can create an array on which you can map these character you want and then import that into your file, and this can be done easily, by the way, I've already mentioned that you can't see HTML characters in react-native app. So you've to see those in a react-native way. – Shahnawaz Hossan Jul 21 '20 at 08:46

score 0 · Answer 2 · answered Jul 14 '20 at 07:56

Using state the way you are using is deprecated, you should either use useState() hook to define a state and its setter function.

Update this

import React,{ useState } from 'react';

//Set State Variables

const [amount,setAmount] = useState(50);
const [currencySymbol,setcurrencySymbol] = useState("&#x20B9;");

//Set value of text input to your state variable values

<TextInput value={currencySymbol + amount.toString()} editable={false} />

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

2 Answers2