title: Use this with React Hooks
body: <p>I just want to use bulma-collapsible. However, the documentation is very poor and the only example I found with React is with a class.
  How can I rebuild this code so that I use React hooks and without two classes?  Is there another way to write <code>this.collapsibles = bulmaCollapsible.attach(&quot;.is-collapsible&quot;, {</code> like with Hooks or something ?</p>
  <p>I think to rewrite the code inside the componentDidMount, can't something like that be done with a useState ?
  Something like
  <code>const [isActive, setisActive] = useState(false);</code> for example.
  And then within the code to change it using the constant.</p>
  <pre><code>class Collapsibles extends React.Component {
    componentDidMount() {
      this.collapsibles = bulmaCollapsible.attach(&quot;.is-collapsible&quot;, {
        container: this.refs.collapsibles
      });
    }
  
    render() {
      return (
        &lt;div ref=&quot;collapsibles&quot; id=&quot;accordion_first&quot;&gt;
          &lt;article className=&quot;message&quot;&gt;
            &lt;div className=&quot;message-header&quot;&gt;
              &lt;p&gt;
                Question 1{&quot; &quot;}
                &lt;a href=&quot;#collapsible-message-accordion-1&quot; data-action=&quot;collapse&quot;&gt;
                  Collapse/Expand
                &lt;/a&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div
              id=&quot;collapsible-message-accordion-1&quot;
              className=&quot;message-body is-collapsible is-active&quot;
              data-parent=&quot;accordion_first&quot;
            &gt;
              &lt;div className=&quot;message-body-content&quot;&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.{&quot; &quot;}
                &lt;strong&gt;Pellentesque risus mi&lt;/strong&gt;, tempus quis placerat ut,
                porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
                Nullam gravida purus diam, et dictum
                &lt;a&gt;felis venenatis&lt;/a&gt; efficitur. Aenean ac{&quot; &quot;}
                &lt;em&gt;eleifend lacus&lt;/em&gt;, in mollis lectus. Donec sodales, arcu et
                sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
                magna a neque. Donec dui urna, vehicula et sem eget, facilisis
                sodales sem.
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/article&gt;
          &lt;article className=&quot;message&quot;&gt;
            &lt;div className=&quot;message-header&quot;&gt;
              &lt;p&gt;
                Question 2{&quot; &quot;}
                &lt;a href=&quot;#collapsible-message-accordion-2&quot; data-action=&quot;collapse&quot;&gt;
                  Collapse/Expand
                &lt;/a&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div
              id=&quot;collapsible-message-accordion-2&quot;
              className=&quot;message-body is-collapsible&quot;
              data-parent=&quot;accordion_first&quot;
            &gt;
              &lt;div className=&quot;message-body-content&quot;&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.{&quot; &quot;}
                &lt;strong&gt;Pellentesque risus mi&lt;/strong&gt;, tempus quis placerat ut,
                porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
                Nullam gravida purus diam, et dictum
                &lt;a&gt;felis venenatis&lt;/a&gt; efficitur. Aenean ac{&quot; &quot;}
                &lt;em&gt;eleifend lacus&lt;/em&gt;, in mollis lectus. Donec sodales, arcu et
                sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
                magna a neque. Donec dui urna, vehicula et sem eget, facilisis
                sodales sem.
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/article&gt;
          &lt;article className=&quot;message&quot;&gt;
            &lt;div className=&quot;message-header&quot;&gt;
              &lt;p&gt;
                Question 3{&quot; &quot;}
                &lt;a href=&quot;#collapsible-message-accordion-3&quot; data-action=&quot;collapse&quot;&gt;
                  Collapse/Expand
                &lt;/a&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;div
              id=&quot;collapsible-message-accordion-3&quot;
              className=&quot;message-body is-collapsible&quot;
              data-parent=&quot;accordion_first&quot;
            &gt;
              &lt;div className=&quot;message-body-content&quot;&gt;
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.{&quot; &quot;}
                &lt;strong&gt;Pellentesque risus mi&lt;/strong&gt;, tempus quis placerat ut,
                porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
                Nullam gravida purus diam, et dictum
                &lt;a&gt;felis venenatis&lt;/a&gt; efficitur. Aenean ac{&quot; &quot;}
                &lt;em&gt;eleifend lacus&lt;/em&gt;, in mollis lectus. Donec sodales, arcu et
                sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
                magna a neque. Donec dui urna, vehicula et sem eget, facilisis
                sodales sem.
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/article&gt;
        &lt;/div&gt;
      )
    }
  }
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1 className=&quot;title is-1&quot;&gt;bulmaCollapsible - ReactJS Integration&lt;/h1&gt;
        &lt;Collapsibles /&gt;
      &lt;/div&gt;
    );
  }
  
  const rootElement = document.getElementById(&quot;root&quot;);
  ReactDOM.render(&lt;App /&gt;, rootElement);
  </code></pre>
  <hr />
  <p>My code snippet</p>
  <pre><code>function App() {
    // the function logic is missing :/
    return (
      &lt;div&gt;
       &lt;div ref=&quot;collapsibles&quot; id=&quot;accordion_first&quot;&gt;
              &lt;article className=&quot;message&quot;&gt;
                &lt;div className=&quot;message-header&quot;&gt;
                  &lt;p&gt;
                    Question 1{&quot; &quot;}
                    &lt;a href=&quot;#collapsible-message-accordion-1&quot; data-action=&quot;collapse&quot;&gt;
                      Collapse/Expand
                    &lt;/a&gt;
                  &lt;/p&gt;
                &lt;/div&gt;
                &lt;div
                  id=&quot;collapsible-message-accordion-1&quot;
                  className=&quot;message-body is-collapsible is-active&quot;
                  data-parent=&quot;accordion_first&quot;
                &gt;
                  &lt;div className=&quot;message-body-content&quot;&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{&quot; &quot;}
                    &lt;strong&gt;Pellentesque risus mi&lt;/strong&gt;, tempus quis placerat ut,
                    porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
                    Nullam gravida purus diam, et dictum
                    &lt;a&gt;felis venenatis&lt;/a&gt; efficitur. Aenean ac{&quot; &quot;}
                    &lt;em&gt;eleifend lacus&lt;/em&gt;, in mollis lectus. Donec sodales, arcu et
                    sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
                    magna a neque. Donec dui urna, vehicula et sem eget, facilisis
                    sodales sem.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/article&gt;
              &lt;article className=&quot;message&quot;&gt;
                &lt;div className=&quot;message-header&quot;&gt;
                  &lt;p&gt;
                    Question 2{&quot; &quot;}
                    &lt;a href=&quot;#collapsible-message-accordion-2&quot; data-action=&quot;collapse&quot;&gt;
                      Collapse/Expand
                    &lt;/a&gt;
                  &lt;/p&gt;
                &lt;/div&gt;
                &lt;div
                  id=&quot;collapsible-message-accordion-2&quot;
                  className=&quot;message-body is-collapsible&quot;
                  data-parent=&quot;accordion_first&quot;
                &gt;
                  &lt;div className=&quot;message-body-content&quot;&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{&quot; &quot;}
                    &lt;strong&gt;Pellentesque risus mi&lt;/strong&gt;, tempus quis placerat ut,
                    porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
                    Nullam gravida purus diam, et dictum
                    &lt;a&gt;felis venenatis&lt;/a&gt; efficitur. Aenean ac{&quot; &quot;}
                    &lt;em&gt;eleifend lacus&lt;/em&gt;, in mollis lectus. Donec sodales, arcu et
                    sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
                    magna a neque. Donec dui urna, vehicula et sem eget, facilisis
                    sodales sem.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/article&gt;
              &lt;article className=&quot;message&quot;&gt;
                &lt;div className=&quot;message-header&quot;&gt;
                  &lt;p&gt;
                    Question 3{&quot; &quot;}
                    &lt;a href=&quot;#collapsible-message-accordion-3&quot; data-action=&quot;collapse&quot;&gt;
                      Collapse/Expand
                    &lt;/a&gt;
                  &lt;/p&gt;
                &lt;/div&gt;
                &lt;div
                  id=&quot;collapsible-message-accordion-3&quot;
                  className=&quot;message-body is-collapsible&quot;
                  data-parent=&quot;accordion_first&quot;
                &gt;
                  &lt;div className=&quot;message-body-content&quot;&gt;
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{&quot; &quot;}
                    &lt;strong&gt;Pellentesque risus mi&lt;/strong&gt;, tempus quis placerat ut,
                    porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla.
                    Nullam gravida purus diam, et dictum
                    &lt;a&gt;felis venenatis&lt;/a&gt; efficitur. Aenean ac{&quot; &quot;}
                    &lt;em&gt;eleifend lacus&lt;/em&gt;, in mollis lectus. Donec sodales, arcu et
                    sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi
                    magna a neque. Donec dui urna, vehicula et sem eget, facilisis
                    sodales sem.
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/article&gt;
      &lt;div/&gt;
    );
  }
  
  export default App;
  </code></pre>