React Native блок для значения ввода текста

state = {
   value: "",
   unit: "Kgs"
}
render(){
   return(
     <View style = {{flexDirection: 'row', alignItems: 'center'}} >
            <TextInput value = {this.state.value} onChangeText = {(value) => this.setState({value})} />
            <View style = {{marginRight: 10}} >
                <Text>{this.state.value === '' ? '' : this.state.unit}</Text>
            </View>
     </View>       
   );
}

Так что я использую этот способ!

Мой state:

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

И тогда у нас есть:

<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"
/>;

Теперь каждый раз, когда пользователь вводит текст, после редактирования ЕДИНИЦА будет добавляться.