CODEWITHSUNDEEP
reactjsrouter
poldeeek
poldeeek

Reputation: 333

Changing image color in NavLink button React

I am wonder how to change image when NavLink is active. So far I wrote this :

            <li className={(active==='adminPanel') ? styles.LeftMenuActiveLink : null }
            onClick={()=>changeActive('adminPanel')}
            style={{color: '#69B4D6'}}>
            <NavLink   to="/adminPanel">
                <img 
                    src={(active==='adminPanel')? NotificationsImageActive : NotificationsImage} 
                    alt="notification icon" width="60px" height="60px" />
                <span >Panel Admina</span>
            </NavLink>
        </li>

where active variable is in my state. This works, but refreshing page destroy it. I am wonder if I can check somehow if NavLink is active and with this information set my src in <img />

Working version :

<li>
                <NavLink onClick={() => setPath("/events")} activeClassName={styles.LoggedLeftMenuActiveLink} to="/events">
                    <img
                        src={(window.location.pathname === "/events") ? EventsImageActive : EventsImage}
                        alt="events icon" width="60px" height="60px" />
                    Wydarzenia
                </NavLink>
            </li>

Upvotes: 0

Views: 420

Answers (1)

d-saurabh
d-saurabh

Reputation: 246

You can check something like location.pathname == "adminPanel" so it will work even when your page is reloaded/refreshed.

Upvotes: 2

Related Questions