0

I have a onChange and onKeyPress events for an input field, where when the user presses enter only I want call the API. And if no change in character then I don't want to trigger the API call.

const [searchValue, setSearchValue] = useState('')

handleChange = (e) => {
  setSearchValue(e.target.value)
}

handleKeyPress = (e) => {
 let charCode = event.keyCode;
    if (charCode === 13) {
      getData();
    }
}


return(
 <input 
  onChange={handleChange}
  onKeyPress={handleKeyPress}
/>
)

So if user types 'a' and press on enter it should call API, but on second time user press enter it should not call API, since no character has been changed . So how can I block that if value is same. I have checked e.target.value !== searchValue inside handleKeyPress but didn't worked

Any help is appreciated

dev
  • 814
  • 10
  • 27
  • Why it didn't work ? Could you give more details about what you have tried ? – Peterrabbit Mar 21 '22 at 18:36
  • const handleKeyPress = ({charCode, target : { value }}) => { if (charCode === 13 && searchValue !=value ) { getData(); } setSearchValue(value) } Remove onChane and do like this. – Darshan Sachaniya Mar 21 '22 at 18:42
  • https://codesandbox.io/s/nifty-browser-yqn4bm, type 'a' and hit enter two times you can see its calling getData function, I have commented the code which I do the early return – dev Mar 21 '22 at 18:42
  • `e.target.value !== searchValue` this didn't work because onChange will call before and set the latest value in state. So onKeyPress it always be the same. – Darshan Sachaniya Mar 21 '22 at 18:43
  • @DarshanSachaniya sure let me try, so you are suggesting we should not use onChange and onKeyPress, only we should use onKeyPress isn't – dev Mar 21 '22 at 18:43
  • @dev You are right. – Darshan Sachaniya Mar 21 '22 at 18:44
  • @DarshanSachaniya Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. I am getting like this when I removed onChange from input field – dev Mar 21 '22 at 18:48
  • I need to remove value when i am not using onChange isn't – dev Mar 21 '22 at 18:54
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243158/discussion-between-darshan-sachaniya-and-dev). – Darshan Sachaniya Mar 21 '22 at 18:57
  • @DarshanSachaniya if you can post this answer it will be helpful for future reference also – dev Mar 21 '22 at 18:57

1 Answers1

1

e.target.value !== searchValue - this didn't work because onChange will call before and set the latest value in state so onKeyPress it always be the same.

Try to do like this:

const App = () => {
  const [searchValue, setSearchValue] = React.useState('')
  const handleKeyUp = ({charCode, target : { value }}) => {
    if (charCode === 13 && searchValue !=value ) {
      console.log("get Data")
    }
    setSearchValue(value)
  }
  return(
      <input keyup={handleKeyUp}/>
  )
}
  • One doubt, when i type 'a' on input field, I am not able to get that, so if I put a console.log(event.target.value) on handleKeyPress its giving me empty string? Why is that happening https://codesandbox.io/s/friendly-jackson-t4oiym – dev Mar 21 '22 at 19:02
  • We have already extracted the value from an event ( target : { value }). Just write console.log(value). You will get it. – Darshan Sachaniya Mar 21 '22 at 19:04
  • Nope i am logging console.log(value) only, check the sandbox, and see the console of codesandbox – dev Mar 21 '22 at 19:06
  • 1
    We need to use onKeyUp https://stackoverflow.com/a/56248972/10829671 check this – dev Mar 21 '22 at 19:09
  • But then its not working searchValue !=value, since both are same it doesn't trigger the API call – dev Mar 21 '22 at 19:13
  • 1
    I think i need to use form tag because these has lot of issues, won't be able to handle it, because I need to use onChange and value to have a controlled field – dev Mar 21 '22 at 19:19
  • Let me try with onChange and onKeyUp, i will update if I am able to without using form tag – dev Mar 21 '22 at 19:24
  • I was able to achieve this, by adding one more state variable as prevSearchString: '', so will compare with searchString !== prevSearchString, So this will work :) – dev Mar 21 '22 at 20:39