Currently, I am in the process of constructing a custom WordPress block using React on the frontend. The primary function of this block is to fetch and display a list from a server utilizing the map method. Each item in the list features a header that, when clicked, reveals its content. To achieve this effect, the content sections are initially hidden with max-height and opacity properties set to 0, allowing for smooth CSS transitions upon opening.
Nevertheless, I have encountered an issue where some of the content-divs within the list entries do not behave as expected. Specifically, links styled as buttons, such as music service links, fail to function properly despite having their href attributes correctly specified in the markup. Furthermore, hovering effects are also missing, resulting in an unclickable state.
Interestingly, this problem is inconsistent, affecting only certain list entries while leaving others unaffected. Strangely, opening a different section with working buttons seems to temporarily fix the malfunctioning buttons in previously affected entries. However, closing the functioning section, reverts the formerly fixed buttons back to their faulty state.
This perplexing behavior almost feels like my code is bewitched or haunted in some way.
It's worth noting that due to the dynamic nature of the list in terms of length and content, I resort to generating IDs and employing getElementByID queries for interaction rather than defining static states for each item.
In the React code snippet provided below:
//...
//releases is useState([]) containing song metadata objects
//returned from database query with known columns
{releases.map(release => {return(
<div key={release.catalogue_index} style={{marginTop: "8px"}}>
{/*Header content shown in the screenshot*/}
<div className="layout-row" style={{backgroundColor: "#111", padding: "8px", marginTop: "4px", position: "relative"}} onClick={(event) => {
document.getElementById(`${release.catalogue_index}-content`).classList.toggle('open');
}}>
<div stlye={{flexGrow: 1}} className="layout-stack">
{/* Title and information displayed here */}
</div>
</div>
{/*Content visible after clicking (second screenshot)*/}
<div className="release-content" id={`${release.catalogue_index}-content`}>
// ... Other content elements here
</div>
</div>
)})}The CSS styling includes transitions for the .release-content class to toggle between hidden and visible states smoothly through changes in max-height and opacity.
The troubleshooting leads me to consider potential interference from WordPress classes ("wp-..."), however, this theory remains inconclusive as only specific list entries exhibit issues, while others perform flawlessly despite sharing these common classes.