Rendering the Next Component if all the validations are correct with React.JS Link Tag

Question

I have a button on click of which i go to the next page , ie

<Link to="/results"><button>Calculate</button></Link>

But i want to go the next page , only if few validations or a flag showResults is true . And, i dont want to hide the button also . Button should be there , but it should go to the next page only if the validations are correct.

Answer 1

I'm assuming you want to update the path of your link.

You could do something like this:

render(){
    const toLink = condition ? '/' : '/results'
    return(
        <Link to={toLink}><button>Calculate</button></Link>
    )

}

Answer 2

You can add preventDefault()

render(){
    return(
        <Link to={toLink} onClick={(e) => {if (!showResults) {e.preventDefault();}}}>
            <button>Calculate</button>
        </Link>
    )

}