I'm trying to render some child components that contain some collapsibles using MateralizeCss, and inside each collapsible three tabs are present, and on each tab there is a button also each of the collapsible headers is assigned a name that I pass through the props.
now on OnClick event of each of those buttons, I call a function which updates the state of the child component with the tab which is selected ('easy', 'med' or hard), something like this.setState({active: this.button.parentname}) and return the name of that collapsible to the parent, but the problem is that the returned name is not the correct one, it is of the first child which was first rendered.
to understand this, suppose I have state in my parent component like.
{category: [
{"name": 1, .. some other properties}, // data of first collapsible
{"name": 2, .. some other properties}, // second
]}
Initially, the state is empty but later the category is being filled asynchronously, but I've handled that.
so I render it like this,
<ul className="collapsible">
{this.state.category.length > 0 ? (this.state.category.map(((category, key) => (
<CategoryCollapsible key={key} category={category} get_name={this.get_name} />
)))) : null}
</ul>
and on child component side I just have the <li> tag inside which the collapsible headers' name is this.props.category.name.
and in the body I just have tabs with button with onClick as I defined above, i.e. return the header name of the collapsible.
so, what could be the reason for this? why is react being confused between the two rendered child components?
I also checked the props using ComponentDidMount() and the props are correct, but as soon as the onClick event is happening the props are just changed to the first one?
what is this sorcery?
any guesses?
