I need help, advice, moral support.. :)
I take part in developing the UI library as a trainee and right now have a task to create a component like a card - it’s a simple wrapper with some styles for any other components.
What’s kind of problem here? Classic - js bubbling.
This wrapper should be clickable, but some children could be clickable too (with different click handlers).
<div onClick={doSomething}>
{props.children} // it could be anything, absolutely, both clickable and non-clickable
</div>
I tried e.preventDefault() in click handler on card with the condition that e.target !== e.currentTarget, but this way makes a major part of card non-clickable through content like text, images, etc.
I know about e.stopPropagation() and it works pretty well, but I don’t have direct access to children.
I mean I don’t know what structure (nesting), kind of tags, and behavior they will have. Also, there could be a case without clickable children at all.
So I can't add this call on my side (I think so. Maybe I'm wrong) - what could I else do in that case to stop bubbling on children's clicks?
Is there any alternative way?
