How to change text input value into zero after onChangeText?

Question

I am new in react native, and I have question about text input and state.

Let say I make an app to buy nature materials, for instance, sands. I have a buy page and a trade component. buy page has a button for buy and go to the next step. And the trade component inside the buy page has text input to input how much users want to buy. The state is come from the parent (buy page) and I send it via props to it's child (trade component)

I have a text input to bid a price, let's called in inputContainer. And beside it, there's a read-only text-input of the sand's mass, let's called it outputContainer. For example, let say 1 kg of sands have a price of $10. So, when I type 100 (dollars) in inputContainer, then the onchangetext works for outputContainer and returns 10 kg.

The problem is when I delete the value inputContainer until nothing is left, the outputContainer returns NaN. What I want is after deleting all input, the inputContainer automatically returns 0 so the outputContainer also returns 0

buy page.js

state = {
 inputTextValue: '',
 outputTextValue: ''
}

onChangeValue = inputValue => {
const qty = ParseInt(inputValue) / 10
if (inputValue === '') {
      this.setState({
        inputTextValue: '0'
      });
    } else {
      this.setState({
        inputTextValue: inputValue.replace(/\B(?=(\d{3})+(?!\d))/g, '.')
        outputTextValue: qty.toString()
      });
    }
}

render(){
  return (
   <View>
    <Trade
      onChange={this.onChangeValue}
      inputText={this.state.inputTextValue}
      outputText={this.state.outputTextValue}
    />
   </View>
  )
}

in trade.js

type Props = {
  inputText?: String,
  outputText?: String
}

class Trade extends PureComponent<Props> {
  static defaultProps = {
    inputText: '',
    outputText: '',
    onChange: () => {}
  }

  render(){
    const { inputText, outputText, onChange } = this.props;
    return(){
       <View>
         <TextInput
          onChangeText={onChange}
          value={inputText}
         />
         <TextInput
          onChangeText={onChange}
          value={outputText}
          editable={false}
         />
       </View>
    }
  }
}

From code above what I got is I do return 0, but when I want to type a new input, the 0 is still in front of the text input.

Well, let me show you the flow when I use that code:

1. Type the input

   input: 100 output: 10

2. Deleting input

   input: 0 output: 0

3. Type again input: 0100 output: (ignore this)

What I want in number 3 is => input: 100 when I type 100

How I can achieve that? Thanks

Answer 1

You can try this

      this.setState({
        inputTextValue: '0',
        outputTextValue: '0'
      });

Answer 2

You must have to put the values of Input and Output into state and initially set their values to '0'