component-composition / encapsulation is overreaching [8:26pm]

[frankcollins3]

attempting to do: use <Boop> which is manual animation based on "npm i react-spring". It makes the child <elem/> dance L -> R upon hover ternary to hide the boat, which is really a loading bar driving back and forth in the cup.

error:

proposed approach: 0: I had two separate conditional rendering statements that used: DATA && <elem>

instead of: DATA ? : </img/>

// also this is the first time I"m trying to wrap 2 image elements in a ternary. I always toggle the img src={var || var2}

approach is returning to that approach. there will be two lines based on same state instead of 1 but that's better than app crash

[frankcollins3]

👍 { SELECTED_WEB_ICONS && <img className={styles.icon} src={NON_GOOGLE_IMG_URL || '/water_img/squid.png'}/> }

[frankcollins3]

👍 rather

                { SELECTED_WEB_ICONS
                        ?
              <Boop rotateAngle={45} speed={800} setImg={SET_NON_GOOGLE_IMG_URL} iconScreenFlag={nothingFunc} showBoat={nothingFunc} boat={nothingFunc} className={styles.icon}>
                <img className={styles.icon} src={NON_GOOGLE_IMG_URL || '/water_img/squid.png'}/>
              </Boop>                  
                        :
        <img className="boat" id={styles.boat} src={boat}/>
                }

[8:35pm]