0

I'm trying to create a new app based on telescope-nova using react ES6 componentes overriding nova-base-components but I can't make use the tab component. I'm getting this error

Uncaught TypeError: (0 , _jquery2.default)(...).tab is not a function

<div className="ui top attached tabular menu" ref="tabsMenu">
  <div className="active item" data-tab="description">Description</div>
  <div className="item" data-tab="elevator">Elevator Pitch</div>
  <div className="item" data-tab="market">Market Analysis</div>
  <div className="item" data-tab="value">Value Proposition</div>
</div>
<div className="ui bottom attached active tab segment" data-tab="description">
  <div dangerouslySetInnerHTML={createMarkup(cleanMarkup(idea.body))}>
  </div>
</div>
<div className="ui bottom attached tab segment" data-tab="elevator">
  <p>elevator</p>
</div>
<div className="ui bottom attached tab segment" data-tab="market">
  <p>marketAnalysis</p>
</div>
<div className="ui bottom attached tab segment" data-tab="value">
  <p>valueProposition</p>
</div>

In componentDidMount I initialize the tabs with this code

$('.ui.top.attached.tabular.menu .item').tab();

And I have added semantic:ui-css to the project and in the package I make use of it (only in the client). I've also used the for the component - so the lifecycle events get triggered.

Any ideas on what is what I'm doing wrong?

bitIO
  • 384
  • 3
  • 11
  • I don't know if this advice is applicable in this specific case, but I would generally try to avoid using any jQuery plugins with React and try finding pure React components that do the same thing, if possible? – Sacha Jun 08 '16 at 00:16
  • Yep, you're absolutely right. But in this case I was requested to do use semantic ui and, AFAIK, it comes with jquery. It seems there's a project trying to do the same as it has been done with react-bootstrap but it is not mature – bitIO Jun 08 '16 at 06:10

1 Answers1

0

And, after a couple of hours trying to fix this before posting the question here, I, finally, realized that jQuery has to be used with jQuery(...).tab() and not with the dollar sign $('...').tab()

bitIO
  • 384
  • 3
  • 11