CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-dom
Orchi
Orchi

Reputation: 51

React <Link> does nothing when clicking on it inside a map

in the Code below I am trying to use Link. The problem is, the first Link element does work, while the second Link element inside the map does not work. It does nothing when clicking on it. I searched a lot on different websites but could not find a reason why that is the case. Can anyone explain to me why this is the case and if there is a solution to my problem?

return (
    <div>
        <p><Link to='/test'>Testlink</Link></p>
        <div className={style.searchBarContainer}>
            <input className={style.searchBar} type="text" placeholder={placeholder} 
             onChange={handleChange} onFocus={handleFocusIn}
             onBlur={handleFocusOut}/>
            <div className={style.searchIcon}><i className="search icon"></i></div>
        </div>
        <div className={style.dataWindow}>
            {searchInput.map((value, key) =>{
                return(
                    <div className={style.dataItem} key={value.id}>
                        <p><Link to='/test'>{value.last_name}, {value.first_name}</Link></p>
                    </div>
                );
            })}
        </div>
    </div>
)

Thanks in advance

Alexej

Upvotes: 1

Views: 616

Answers (3)

Orchi
Orchi

Reputation: 51

I found my mistake: The handleFocusOut function, that is executed onBlur, was used to hide the window in which there is the link I wanted to select. The onBlur was executed before the Link element, hid the window and therefore nothing happend after clicking on the link. I am now pausing the handleFocusOut function for 100ms so that the link gets executed first and now it works. I know this is not the best solution but it is the only one that worked unitl now. I will search for a better one. Thanks everyone for helping me :)

Upvotes: 1

Anthony Tietjen
Anthony Tietjen

Reputation: 1064

Your code is working here in my CodeSandbox. The problem must be somewhere else.

Upvotes: 1

Alex Tom
Alex Tom

Reputation: 221

You should use Link element on top lavel at least to provide a much wider hit area to click:

return (
    <div>
        <p><Link to='/test'>Testlink</Link></p>
        <div className={style.searchBarContainer}>
            <input className={style.searchBar} type="text" placeholder={placeholder} 
             onChange={handleChange} onFocus={handleFocusIn}
             onBlur={handleFocusOut}/>
            <div className={style.searchIcon}><i className="search icon"></i></div>
        </div>
        <div className={style.dataWindow}>
            {searchInput.map((value, key) =>{
                return(
                    <Link to='/test' key={value.id}>
                        <div className={style.dataItem}>
                            <p>{value.last_name}, {value.first_name}</p>
                        </div>
                    </Link>
                );
            })}
        </div>
    </div>
)

Upvotes: 1

Related Questions