values not getting edited from input field in reactjs

Question

So i have this input where user enters some string and then we make an api call and shows some suggestions where user can select one of the suggested data.Once user selects any of these, i want the data in input field equal to that which is happening as of now.However user is not able to edit after selecting.I felt that it's some controlled or uncontrolled component issue in react.

<SearchRectangle>
          <SearchImageDiv>
          <SearchImg src={SearchImage}/>
          </SearchImageDiv>
          <div>
            <input
                style={{borderRadius:'10px',
                marginLeft:'30px',
                backgroundColor:'rgba(216,216,216,0.41)',
                height:'48px',
                width:'100%',
                  outline: 'none',
                  border: 'none',
                  fontSize: '1.6rem',
                  fontFamily: 'Open Sans',
                  fontWeight: 'normal',
                  fontStyle: 'normal',
                  fontStretch: 'normal',
                  paddingLeft: '10px'
                }}
                value={ this.state.inputValue || this.state.selectedCity || this.state.selectedPincode } onKeyUp={evt => this.updateInputValue(evt)}/>
          </div>

We execute this code when user selects any of the suggested value in autosuggest.

selectsuggestions =(item)=>{
    if(item.city){
      this.setState({
        selectedCity:item.city,
        inputValue:null,
        selectedPincode:null,
        suggestions:[]
      })
    }
    else{
      this.setState({
        selectedPincode:item.pincode,
        selectedCity:null,
        inputValue:null,
        suggestions:[]
      })
    }
  }

We are executing suggestions using this way.

 <Suggestions selectsuggestions={(e,r)=>this.selectsuggestions(e,r)} results ={this.state.suggestions }/>

Answer 1

While using value method of input tag, the value presented is chained to the value of value

So you have two options

1. call setState on input onChange and then value will assign new state to UI

2. use defaultValue instead value , that way UI presentation isn't chained