Grow

[Calathea-Z]

`return (

} id="search"> {}

);` We believe that the above code snippet from our application is a bit buggy and could be improved. This snippet is taken from “Search.jsx” in “Components” - lines 31-35. We thought that it would work perfectly without the onClick={ because the already navigated to the page that we wanted it to when the user finished their inputs. However, the problem seems to be that “BreedPhoto.jsx” only stays updated with the name tag and doesn't affect the breed photos because “fetchDogList” is not being recalled. “fetchDogList” is recalled one time only when refreshing the page, so to recall the function we needed to add onClick inside of a button. We got it working after a lot of troubleshooting and testing however, we still don't fully understand why this method is working and feel that we could improve it's functionality.

[maker-jws]

return ( 
<div className="search-context"> <div className="search-context-inner"> 
    <input type="text" 
                value={searchValue} 
                onChange={onChange} 
                id="search" 
                placeholder={props.placeHolder} /> 

      <Link to={/ListOfDogs/${searchValue}}> 
            <button onClick={<Link to={/ListOfDogs/${searchValue}}></Link>} id="search"> 
                       {<FaDog />} 
            </button> 
       </Link> 
  </div> );

[maker-jws]

@Calathea-Z @Chrisstruong - Two issues: 1. You have two links, one wrapping a button - when you have a button inside of a form it can cause the form's onsubmit to fire - which can change the page.

it does appear you have two nested Links - if your search data is provided through a result which might also be causing browser location changes when clicked

If you wanted the search button to trigger the form, or a click, I might reconsider your JSX component structure for the search.