search

frankcollins3 / Next-Water-App

Happy, Healthy Water Cycling App that tracks user/human fluid intake.
https://next-water-app.vercel.app
1 stars 0 forks source link

jq targeting && sass 💋 for animation [11:06am] #71

Closed frankcollins3 closed 11 months ago

frankcollins3 commented 11 months ago

attempting to do: translate this: const confirmationJQ = $('#confirmation')[0] with an <img id={styles.selectedIcon}/>

error: JQ && SASS fussing

proposed approach: 0: useEffect -> document.querySelector(${styles.selectedIcon} -> useRef().current to store the reference to element

1: string interpolation wasn't working

frankcollins3 commented 11 months ago

still can't get it. chatGPT suggested this. added [0] index and didn't work either. const selectedIconJQ = $(#${styles.selectedIcon}) [11:13am]

frankcollins3 commented 11 months ago

the image element had a class before that it shared alongside the {confirm, reject} buttons to select icon. 👍 this solution: give img element a unique class, & string ID to which the jq expression that adds class can target.

<img id="iconID" className={styles.icon} src={img || NON_GOOGLE_IMG_URL}/> [11:20am]