2

Okay. So I have something like this.

I added the Link around the whole post thinking I could just stop the bubbling for the individual buttons, but stopPropagation() is not working as expected.

I have split the button actions into a separate component, which was suggested by another post on the subject but that didn't do the trick. I'm assuming this has something to do with the fact that the it's a react-router-dom Link, but it could be something else.

Any ideas? 

import React from 'react';
import { Link } from 'react-router-dom';

const MyComponent = ({
  doSomething
})=>(
  <Link to={`/some/url`}>
  <div className="post">
    <span className="button" onClick={e=>{
      e.stopPropagation();
      doSomething();
    }}>My Button</span>
  </div>
  </Link>
)
ram
  • 680
  • 5
  • 15

1 Answers1

1

should work:

e.preventDefault()

more detailed explanation: stopPropagation/preventDefault behavior on an element inside a link

Also, stopPropagation is a function, and it's waiting to be called.

user2541867
  • 344
  • 4
  • 12
  • Well that was easy! Thanks so much. This is pseudo-code so I actually did have stopPropagation called, but preventDefault was what I needed! – ram Jan 07 '20 at 00:01