CODEWITHSUNDEEP
reactjsreact-hooksonclick
Ori Baram
Ori Baram

Reputation: 13

onClickHandler sometimes work, sometimes not - React

The onClickHandler in the following code, in this component, 'SearchResult', sometimes work and sometimes not.

I can't figure out any logic that can explain why it works when it works, and why it's not working, when it's not working.

I've put a debugger inside the onClickHandler, at the beginning of it, and when it's not working, it doesn't get to the debugger at all - what indicates that the function sometimes isn't even called, and I can't figure out why.

Furthermore, I've tried to move all the code in function to the onClick, inline, but then, it's not working at all.

In addition, I've tried to use a function declaration instead of an arrow function, and it still behaves the same - sometimes it works, and sometimes it's not...

This is the site, you can see the behavior for yourself, in the search box.

This is the GitHub repository

Here you can see a video demonstrating how it's not working, except for one time it did work

Please help.

The problematic component:

import { useDispatch } from 'react-redux'
import { Col } from 'react-bootstrap'

import { getWeatherRequest } from '../redux/weather/weatherActions'
import { GENERAL_RESET } from '../redux/general/generalConstants'

const SearchResult = ({ Key, LocalizedName, setText }) => {
  const dispatch = useDispatch()

  const onClickHandler = () => {
    dispatch({ type: GENERAL_RESET })
    dispatch(
      getWeatherRequest({
        location: Key,
        cityName: LocalizedName,
      })
    )
    setText('')
  }

  return (
    <Col className='suggestion' onClick={onClickHandler}>
      {LocalizedName}
    </Col>
  )
}

export default SearchResult

This is the parent component:

import React, { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Form } from 'react-bootstrap'

import { getAutoCompleteResultsRequest } from '../redux/autoComplete/autoCompleteActions'
import { AUTO_COMPLETE_RESET } from '../redux/autoComplete/autoCompleteConstants'
import SearchResult from './SearchResult'

const SearchBox = () => {
  const [text, setText] = useState('')

  const dispatch = useDispatch()

  const autoComplete = useSelector((state) => state.autoComplete)
  const { results } = autoComplete

  const onChangeHandler = (e) => {
    if (e.target.value === '') {
      dispatch({ type: AUTO_COMPLETE_RESET })
      setText('')
    }
    setText(e.target.value)
    dispatch(getAutoCompleteResultsRequest(e.target.value))
  }

  const onBlurHandler = () => {
    setTimeout(() => {
      dispatch({ type: AUTO_COMPLETE_RESET })
      setText('')
    }, 100)
  }

  return (
    <div className='search-box'>
      <Form inline>
        <div className='input-group search-md search-sm'>
          <input
            type='search'
            name='q'
            value={text}
            onChange={onChangeHandler}
            onBlur={onBlurHandler}
            placeholder='Search Location...'
            className='mr-sm-2 ml-sm-3 form-control'
          />
        </div>
      </Form>
      <div className='search-results'>
        {results &&
          results.map((result) => {
            return (
              <SearchResult key={result.Key} {...result} setText={setText} />
            )
          })}
      </div>
    </div>
  )
}

export default SearchBox

Upvotes: 1

Views: 305

Answers (2)

fr43nk
fr43nk

Reputation: 129

I played a bit with your code and it looks like a possible solution may be the following addition in the SearchResult.js:

const onClickHandler = (e) => {
    e.preventDefault();
...

After some tests

Please remove the onBlurHandler. It seams to fire ahaed of the onClickHandler of the result.

Upvotes: 1

Alex Guberman
Alex Guberman

Reputation: 203

  1. Can you put console.log(e.target.value) inside the onChangeHandler, press again search results and make sure that one of it doesn't working and show us the console.
  2. In searchResult component print to the console LocalizedName as well

Upvotes: 1

Related Questions