How to change state through react-router-dom Link?

Question

I am trying to change the state through a Link component when I click on an image. I'm not sure if it's how the Link component is written or if the clickHandler is incorrectly used, but it console logs the state as true even after I click it.

import React, {useState, useEffect} from 'react'
import {Link, Switch, Route} from 'react-router-dom'
import RecipePage from './RecipePage'
export default function Recipes({dataArray}){

const [strMeal, setStrMeal] = useState(true)

function clickHandler(){
    setStrMeal(false)
}




return(
    <div>
        <Link to={{pathname:'/recipepage', state: {strMeal: strMeal} }}>
            <div onClick={() => clickHandler()}>This is an image</div>
        </Link>
    </div>
    
)

}

How do I change the state to false?

Answer 1

It's recommended to use onClick handler on <Link /> component itself:

<Link to={{pathname:'/recipepage', state: {strMeal: strMeal} }} onClick={(e) => clickHandler(e)}>

Now, you'll also need to prevent the default behavior of the link:

function clickHandler(e){
    e.preventDefault()
    setStrMeal(false)
}

---

But I am not sure why you want to do this? Since, Link is used to go to the path you provide. So, I guess you want to do something on /recipepage:

So, you'll get the pathname, or even with the state you've provided and do something with that there in the component.