After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to display: flex upon clicking. Due to the shared classname among all mapped components, I need to utilize an object like lodash instead of using document.getElement. Since the data originates from a database and varies based on user requirements, the number of columns is dynamic and unknown.
I'm seeking guidance on how to target the specific classname of the div or tag within the map iteration where the onclick event occurs. Any assistance would be greatly appreciated!
import _ from "lodash"
import React from 'react'
const dummyData = {
columnOne: "item one",
columnTwo: "item two",
columnThree: "item three"
}
function TestPage() {
return (
_.map(dummyData, (data, key) => {
return (
<>
<div className="column-container">
<p className="heading">{key}</p>
<div className="show-content-btn">V</div> //button to toggle content visibility
</div>
<p className="content">{data}</p> //content to be hidden/shown
</>
)
}
)
)
}
export default TestPage