ReactJs bug to update array index in object

Question

i want to change the index based on user change in input field min_value or max_value

i have this on state

sensitiveValues: {
   TOTAL_ASSETS: [0, 1416758841]
}

this is my input field

<NumberFormat
        className="grey-form input-padding"
        defaultValue={parseFloat(max_value).toFixed(0)}
        thousandSeparator={true}
        value={this.state.sensitiveValues[name] ? parseFloat(this.state.sensitiveValues[name][1]) : 0}
        onChange={this.amountInputChangeHandler}
        id={`${name}-max_value`}/>

and this onChange function that should be change the index 0 or index 1 of TOTAL_ASSETS based on the type. the type is the id of the input field.

amountInputChangeHandler = (e) => {
            let [key,type] = e.target.id.split('-')
            //key === TOTAL_ASSETS
            //type === min_value or max_value

            // We update first value in array for any key

            if(type==='min_value'){
                console.log('it goes to min_value')
                this.setState({
                        sensitiveValues: {
                            ...this.state.sensitiveValues,
                            [key]: [parseFloat(e.target.value.replace(/,/g, '')), this.state.sensitiveValues[key][0]] 
                        }
                })
            }
            // We update Second value in array for any key
            if(type==='max_value'){
            console.log('it goes to min_value')
                this.setState({
                        sensitiveValues: {
                            ...this.state.sensitiveValues,
                            [key]: [parseFloat(e.target.value.replace(/,/g, '')), this.state.sensitiveValues[key][1]] 
                        }
                })
        } 
}

but whenever i try to change the value from the field, it change both min_value and max_value

Answer 1

In the amountInputChangeHandler, depending the type is max_value or min_value you need to update value at index 0 or 1. Also use setState callback to perform such updates.

Notice the order in returned values [key]: [value, prev.sensitiveValues[key]] and [key]: [prev.sensitiveValues[key], value]

amountInputChangeHandler = (e) => {
      let [key,type] = e.target.id.split('-')
      const value = parseFloat(e.target.value.replace(/,/g, ''))
      //key === TOTAL_ASSETS
      //type === min_value or max_value

      // We update first value in array for any key

      if(type==='min_value'){
          console.log('it goes to min_value')
          this.setState(prev=> ({
              sensitiveValues: {
                  ...prev.sensitiveValues,
                  [key]: [value, prev.sensitiveValues[key][1]] 
              }
          }))
      }
      // We update Second value in array for any key
      if(type==='max_value'){
          console.log('it goes to max_value')
          this.setState(prev=> ({
              sensitiveValues: {
                  ...prev.sensitiveValues,

                  [key]: [prev.sensitiveValues[key][0], value]


              }
          }))
      } 
}