React Native unit for text input value

Question

I want to add an unit to a textInput value:

---

I've tried to use the following, but didn't get any result:

value = { this.state.totalWeight + " Kgs"}

---

Also I tried to add the " Kgs" in onSubmitEditing:

onSubmitEditing={() => { 
    this.refs.firstInput.refs.value = this.state.totalWeight + " Kgs" 
}}

But again, no result!

Any idea?

Answer 1

So i use this way!

My state:

this.state = {
  commodity: "",
  isFilled: false
};

And then we have:

<TextInput
  style={{ flex: 1 }}
  onChangeText={commodity =>
    this.setState({
      commodity,
      isFilled: false
    })
  }
  value={
    this.state.isFilled ? this.state.commodity + " Unit" : this.state.commodity
  }
  onFocus={() => this.setState({ isFilled: false })}
  onEndEditing={() => {
    if (this.state.commodity == "") {
      this.setState({ isFilled: false });
    } else {
      this.setState({ isFilled: true });
    }
  }}
  placeholder="Commodity"
/>;

Now every time the user enter a text, after editing, the UNIT will be added.