I am trying to add animation to a search icon when clicked in React. Using the useRef hook, I am able to access the element and applying custom styles to it.
const [searchBar, setSearchBar ] = useState(false);
const searchIcon = useRef();
const searchIconStyle = {
transition: 'rotate .3s ease', // smooth transition
rotate: searchBar? "360deg" : "0",
}
function handleSearchClick(e) {
setSearchBar(prevState => !prevState);
}
The above code works as expected the first time I click, but subsequent clicks do not trigger the animation. The search icon is created using FontAwesome components
{searchBar && <input type="search" placeholder="Search product..."/>}
<FontAwesomeIcon icon={faMagnifyingGlass} className="search-icon"
onClick={handleSearchClick} ref={searchIcon} style={searchIconStyle}/>
I would like to animate the icon with each click based on changes in the searchBar variable. How can this be achieved?