<div>
{arrayOfDetails.map((deets, index) => (
<div>
<h1>{deets.firstName + ' ' + deets.lastName}</h1>
<div>
<div id={index}>
{listOfGrades(deets.grades)}
</div>
</div>
<button type="button" data-toggle="button" aria-pressed="false" autoComplete="off">+</button>
</div>
))}
</div>
I'm mapping through an array from a JSON. How do I get the button to toggle the display of the div containing listOfGrades with the ID?
So 20 buttons for 20 listOfGrades divs, and each button should toggle its own corresponding div.
Thanks!
add a property isActive to each data object.
for example :
setArrayOfDetails(dataComingFromServer.map(item=>({...item,isActive:true})))
create the callback for toggling active status:
const toggleActive=(index)=>{
const newState=[...arrayOfDetails]
newState[i].isActive=!newState[i].isActive
setArrayOfDetails(newState)
}
now render the items that are active:
<div>
{arrayOfDetails.map((deets, index) => (
<div>
<h1>{deets.firstName + ' ' + deets.lastName}</h1>
<div>
{deets.isActive && <div id={index}>
{listOfGrades(deets.grades)}
</div>}
</div>
<button type="button" data-toggle="button" aria-pressed="false" autoComplete="off" onClick={()=>toggleActive(index)}>+</button>
</div>
))}
You can add a property in your data which keeps track of the hidden state. Then on button click for a row, find the index and toggle hidden property for that row.
const [deets, setDeets] = useState([]); // Set initial Value here with hidden property for each item in array
const toggleElement = (idx) => {
let newDeets = [...deets];
deets[idx].hidden = !deets[idx].hidden;
setDeets(newDeets);
};
return (
<div>
{arrayOfDetails.map((deets, index) => (
<div>
<h1>{deets.hidden ? "" : `${deets.firstName} ${deets.lastName}`}</h1>
<div>
{deets.hidden ? (
""
) : (
<div id={index}>{listOfGrades(deets.grades)}</div>
)}
</div>
<button
type="button"
data-toggle="button"
aria-pressed="false"
autoComplete="off"
onClick={() => toggleElement(index)}
>
+
</button>
</div>
))}
</div>
);