Rendering Materialize collapsibles within the React map function

Question

I am trying to render React elements using the map function and I would like each of my elements to have a collapsible component (while using the Materialize CSS framework). However, I cannot get my collapsibles to work, i.e., only the header is visible and they do not react to clicks.

I have a hunch that this has something to do with event listeners, but have not been able to find a solution to my problem.

I have tried putting the < ul > tag inside the parent element (Parent.js) and attach the event listener to all 'collapsible' elements after they have finished rendering. The collapsibles were reacting to clicks (not expanding), but the console was printing an error message about missing classList for the Element.

How do I get my collapsibles to expand?

Thank you!

Parent.js

Results =  
    this.state.results.result.map(function(item, index) {
      return (
        <div key={index}> 
          <Result 
            title={item.title} 
            link={item.link} 
            snippet={item.snippet} 
            id={sessionid}
          /> 
        </div>
      )}       
    )

Result.js

<ul className='collapsible'> 
      <div className="collapsible-header"> 
          Hello
      </div>
      <div className="collapsible-body">
        <span>
          Lorem ipsum dolor sit amet.
        </span>
      </div> 
</ul>

Inside the Result.js element:

componentDidMount() {
     $('.collapsible').collapsible();
}

Answer 1

Materialize CSS may directly not work with React like that. Have you tried the React-Materialize framework. It is a popular library using the materialize CSS integrated with React and they have the Collapsible element in their component examples:

https://react-materialize.github.io/#/collapsible