MateralizeCSS (tabs, collapsibles, buttons) not working correctly: React.js (render)

Question

I'm trying to create a number of collapsibles, and inside each collapsible, there is a tab, the tab has 3 columns (easy, medium, hard).

and I have the collapsible data inside my state and I'm trying to loop over my state and render the collapsibles inside which tabs are present.

my state is like-

{ 
  collapsibles: [
      {tabs_data: {'href': 'something1', 'name': 'something1'}},
      {tabs_data: {'href': 'something2', 'name': 'something2'}},
      ...
   ]
}

and I'm trying to render it like..

   <ul className="collapsible">
            {this.state.collapsibles.length > 0 ? (this.state.collapsibles.map(((data_dict, key) => (
                <CategoryCollapsible key={key} category={data_dict} />
            )))) : null}
   </ul>

the CategoryCollapsible is a simple <li> element of a collapsible.

import React, { Component } from 'react'
export default class CategoryCollapsible extends Component {
render() {
    return (
        <li id={this.props.category.name}>
            <div className="collapsible-header">{this.props.category.name}</div>
            <div className="collapsible-body">
                <div className="row">
                    <div className="col s12">
                        <ul className="tabs">
                            <li className="tab col s3"><a href={"#easy" + this.props.category.name} >Easy</a></li>
                            <li className="tab col s3"><a href={"#medium" + this.props.category.name} >Medium</a></li>
                            <li className="tab col s3"><a href={"#hard" + this.props.category.name} >Hard</a></li>
                        </ul>
                    </div>
                    <br />
                    <div id={"easy" + this.props.category.name} className="col s12">1</div>
                    <div id={"medium" + this.props.category.name} className="col s12">2</div>
                    <div id={"hard" + this.props.category.name}  className="col s12">3</div>
                </div>
            </div>
        </li>
    )
}
}

the problem is that 1, 2, 3 are supposed to be hidden, but they just show up like in the picture. interesting this is, when I don't render it inside the loop it works perfectly. what is the matter with it?

Answer 1

did you perhaps forget to call the following when your component updates?

var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems, options);