Input does not allow empty in react-native

Question

I have a function to render its view by mapping the JSON Array. The listing was OK, with pre-initialized value but when I want to change the value of each input by deleting current value until empty, it will pass back the zero '0' value into input and I cannot write any value to it. This is my first time creating mapping input.

I want it to overwrite the item data; so when press Save button, it will use the overwritten value from each input.

componentDidMount() {
    const { IsModify, ServiceData } = this.state;
    var tempArray = JSON.parse(JSON.stringify(AppGlobal.constObjService));
    this.setState({ ServiceData: this.state.ServiceData.concat(tempArray) });

    var arrayLength = ServiceData.length;
    for (var i = 0; i < arrayLength; i++) {
      if (IsModify === true) {

      } else if (IsModify === false) {
        var newUser = 'PSCount';
        var newValue = '0';
        ServiceData[i][newUser] = newValue;
      }

    }
    console.log('Initialize: ' + JSON.stringify(ServiceData));
}

renderServiceList() {
  return this.state.ServiceData.map((item, index) => {
    return (
      <Row style={{ backgroundColor: index % 2 == 0 ? "#f2f2f2" : "#FFFFFF" }}>
        <Col size={4} style={{ justifyContent: 'center' }}>
          <Text numberOfLines={2}>{item.ServiceName}</Text>
        </Col>
        <Col size={7} style={{ justifyContent: 'center' }}>
          <Item regular style={{}}>
            <Input
                  keyboardType={'number-pad'}
                  placeholder='Enter valid number'
                  ref={(ref) => this.PSCount = ref}
                  value={item.PSCount.toString()}
                  onChangeText={PSCount => { item.PSCount = PSCount.toString() }} />
              </Item></Col>
          </Row>
        )
      })
    }

Answer 1

As for now, I have found some solutions from here . So I can have each value that overwritten.

Create new event for textchange:-

  onChangeText = (PSCount, index) => {
    this.setState(prevState => {
      prevState.ServiceData[index].PSCount = PSCount
      return {
        ServiceData: prevState.ServiceData
      }
    });
  }

And for my text input map:-

  <Input style={{ paddingLeft: 20, paddingRight: 20 }}
    maxLength={3}
    blurOnSubmit={false}
    placeholder='Enter valid number'
    placeholderTextColor='rgba(0, 0, 0, 0.3)'
    keyboardType={'number-pad'}
    ref={(ref) => this.PSCount = ref}
    value={this.state.ServiceData[index].PSCount ?? '0'}
    onChangeText={PSCount => this.onChangeText(PSCount, index)}
  />

I thought it will be simply use as in .NET Collection data manipulation. Now I know from it.

Appreciate to those who pointing out about the state change for onChangeText . By mean, the onChangeText is always require update state.