0

I am using a third-party react library (blueprintjs) with a Tab component that's used like this:

<Tab
    id="notifications"
    title={<span>"Notifications"</span>}
    panel={<div>The content of the page</div>}
/>

Instead of being rendered directly, it's parent component Tabs renders all children components that are of type Tab.

I would like to link the title and panel props together, so that I can show a badge in the title element, based on the state of the panel element:

The title element with a badge based on what the panel shows

How should I go about this?

My initial ideas:

  1. Get the number of unread notifications from the panel element via a ref and pass it to the title element as a prop

  2. Move state up one level. This feels awkward -- I want the management for the notifications to stay in the notifications page.

  3. Have a <NotificationTab ... /> element which handles state for the panel + the title together. The problem with this method is that the parent Tabs component will not recognize non-Tab components.

Note: I am aware that there are several questions about this, but the answer is always "lift the state into the parent component". I really would rather not do that, since the parent component doesn't have anything to do with notifications -- it just switches tabs.

MHebes
  • 2,290
  • 1
  • 16
  • 29
  • "...since the parent component doesn't have anything to do with notifications -- it just switches tabs" But what you are asking makes the adding of notification # to each tab's title a concern of *a* parent component. Now whether or not this lifted state lives in your `Tabs` container, a parent's parent or higher, or app state (i.e. redux) is up to you. Lifting state *somewhere* and passing as props is the pattern and answer as you've discovered. – Drew Reese Oct 20 '20 at 16:42
  • @DrewReese Fair enough. If you post that as an answer I'd accept it. – MHebes Oct 20 '20 at 23:51

0 Answers0