CODEWITHSUNDEEP
reactjs
nerdess
nerdess

Reputation: 10930

Communication between nested but independent components in react.js

i like to develop a simple tooltip component in react.js

the tooltip gets defined like so in e.g. App.jsx:

<TooltipLink>Hover over me
    <Tooltip>I am the Tooltip content</Tooltip>
</TooltipLink>

My question is: What is the best way of TooltipLink and Tooltip to talk to each other?

They are nested but I cannot use props because they are not nested directly in the component itself. Also, I don't want to use the parent (e.g. App.jsx) to manage the communication between TooltipLink and Tooltip because I want them to be self-contained.

I thought about refs but when i define a ref inside the Tooltip component then TooltipLink does not know about it (I assume because refs only work when components are nested inside the components themselves).

I could of course use simple DOM-programming for TooltipLink and Tooltip to communicate (e.g. use e.target when the user hovers over TooltipLink and then find its first child) but I thought there must be a more react-y way...

Upvotes: 0

Views: 196

Answers (1)

jb cazaux
jb cazaux

Reputation: 320

You have 3 options:

  • cascading props in the whole hierarchy
  • using redux
  • using the context API

I prefer to use redux, because the context API is not officially supported (breaking changes may happen, like in react 16.3). Cascading props is not really beautiful but may be convenient for small apps. (<MyComponent {...props}>)

Upvotes: 0

Related Questions