Collapsible card with hooks-CodePudding

I have the Collapsibles class and it works fine. However, it bothers me that it is a class and works with componentDidMount as well as the code inside the componentDidMount function, i.e.

this.collapsibles = bulmaCollapsible.attach(".is-collapsible", {
      container: this.refs.collapsibles
});

How can the class be rewritten to a function that works with hooks?

My code:

import React from 'react'
function NewCollapsibles () {
    return (
        <div>
            
        </div>
    )
}

export default NewCollapsibles

Code:

import React, { useEffect } from 'react'
import bulmaCollapsible from '@creativebulma/bulma-collapsible';


class Collapsibles extends React.Component {
  componentDidMount() {
    this.collapsibles = bulmaCollapsible.attach(".is-collapsible", {
      container: this.refs.collapsibles
    });
  }

  render() {
    return (
      <div ref="collapsibles" id="accordion_first">
        <div className="card">
          <header className="card-header">
            <p className="card-header-title">
              Card title
            </p>
            <a href="#collapsible-card" data-action="collapse" className="card-header-icon is-hidden-fullscreen" aria-label="more options">
              <span className="icon">
                <i className="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </a>
          </header>
          <div id="collapsible-card" className="is-collapsible is-active">
            <div className="card-content">
              <p className="title is-4">
                “There are two hard things in computer science: cache invalidation, naming things, and off-by-one
                errors.”
              </p>
              <p className="subtitle is-5">
                Jeff Atwood
              </p>
            </div>
            <footer className="card-footer">
              <p className="card-footer-item">
                <span>
                  View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
                </span>
              </p>
              <p className="card-footer-item">
                <span>
                  Share on <a href="#">Facebook</a>
                </span>
              </p>
            </footer>
          </div>
        </div>


      </div>
    )
  }
}
export default Collapsibles;

CodePudding user response：

import React, { useEffect, useRef } from 'react'
import bulmaCollapsible from '@creativebulma/bulma-collapsible';


const Collapsibles = () => {

let collapsiblesRef = useRef(null);

useEffect(() => {
 bulmaCollapsible.attach(".is-collapsible", {
  container: collapsiblesRef.current });
}, [])

return (
  <div ref={collapsiblesRef} id="accordion_first">
    <div className="card">
      <header className="card-header">
        <p className="card-header-title">
          Card title
        </p>
        <a href="#collapsible-card" data-action="collapse" className="card-header-icon is-hidden-fullscreen" aria-label="more options">
          <span className="icon">
            <i className="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </a>
      </header>
      <div id="collapsible-card" className="is-collapsible is-active">
        <div className="card-content">
          <p className="title is-4">
            “There are two hard things in computer science: cache invalidation, naming things, and off-by-one
            errors.”
          </p>
          <p className="subtitle is-5">
            Jeff Atwood
          </p>
        </div>
        <footer className="card-footer">
          <p className="card-footer-item">
            <span>
              View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a>
            </span>
          </p>
          <p className="card-footer-item">
            <span>
              Share on <a href="#">Facebook</a>
            </span>
          </p>
        </footer>
      </div>
    </div>


  </div>
)  
}
export default Collapsibles;