Uncaught TypeError: cannot read properties of undifined (reading 'length')

Question

I'm getting this error

and here's my code:

const Search = () => {
    const [searchBox, setSearchBox] = useState(false)
    const [searchIcon, setSearchIcon] = useState(true)
    const {searchText, setSearchText} = useState('')
    const [searchChanged, setSearchChanged] = useState(false)
    const searchBoxRef = useRef()
    const history = useHistory()

    useEffect(() => {
        document.addEventListener('mousedown', outsideSearchClickListener, false)
        return () => {
            document.removeEventListener('mousedown', outsideSearchClickListener, false)
        }
    }, [])

    useEffect(() => {
        if (searchText.length > 0) {
            history.push({
                pathname: '/search',
                search: `?q=${searchText}`
            })

        } else if (searchChanged && searchText.length === 0) {
            history.replace({ pathname: '/browse' })
        }
    }, [history, searchText, searchChanged])

    const searchClickHandler = () => {
        setSearchBox(true)
    }

    const outsideSearchClickListener = event => {
        if (searchBoxRef.current && !searchBoxRef.current.contains(event.target)) {
            setSearchBox(false)
        }
    }

    const searchTextChangeHandler = event => {
        const textValue = event.target.value
        setSearchText(textValue)
        setSearchChanged(true)
    }

    const clickCrossHandler = () => {
        setSearchText('')
    }
    
    const searchBar = (
        <CSSTransition in={searchBox} classNames="search-animation" timeout={500} unmountOnExit
            onEnter={() => setSearchIcon(false)}
            onExiting={() => setSearchBox(false)}
            onExited={() => setSearchIcon(true)}>
            <div className="Holder">
                <FontAwesomeIcon className="Icon" size="lg" icon={faSearch} />
                <input autoFocus placeholder="Titles, people, genres"
                    onChange={searchTextChangeHandler} value={searchText} />
                {searchText.length > 0 ?
                    <FontAwesomeIcon onClick={clickCrossHandler} size="lg" icon={faTimes} /> : null
                }
            </div>
        </CSSTransition>
    )

    return (
        <div className="SearchBox" onClick={searchClickHandler} ref={searchBoxRef}>
            {searchIcon && <FontAwesomeIcon size="lg" icon={faSearch} />}
            {searchBar}
        </div>
    )
}

I rechecked my source code and compare mine with the original code for this but still no clue on this error. The console output is kind of ambiguous. FYI: the original one is work, but it's not work for me

Answer 1

Maybe change your handler like this so you ensure the value is always a string

const searchTextChangeHandler = event => {
    const textValue = event.target.value || ""
    setSearchText(textValue)
    setSearchChanged(true)
}