Next.js not re-rendering UI on state change - css

Question

On my Next js project I am looping through an array of amenities that displays a div that when clicked toggles an active prop. The addAmenity function handles the logic that loops through the amenities array and toggles the specific array item's active property. If the active prop of the div is true the .amenities-active class is supposed to be applied to it and the background of the div should turn green but it does not. Is there any idea as to what I am doing wrong. The console.log(tempList) confirms a change to true when clicked on a false amenity but the UI does not change to have a green background color.
//Next js
const amenitiesDefaultArr = [
{
data: "bathroom",
text: "Private Bathroom",
icon: <WcIcon fontSize="large" />,
active: false,
},
{
data: "dining",
text: "Dining Hall",
icon: <FastfoodIcon fontSize="large" />,
active: false,
},
{
data: "wifi",
text: "Wifi",
icon: <WifiIcon fontSize="large" />,
active: false,
}
]
const addAmenity = (e) => {
let dataItem = e.currentTarget.dataset.amenity
let tempList = amenitiesList
tempList.map(el => {
if (el.data === dataItem) el.active = !el.active
return el
})
console.log(tempList)
setAmenitiesList(tempList)
}
const AddDorm = () => {
const [amenitiesList, setAmenitiesList] = useState(amenitiesDefaultArr)
return (
<>
{
amenitiesList.map(el => {
const {data, text, icon } = el
let { active } = el
return (
<div
className={`amenity ${active && `amenity-active`}`}
key={data}
data-amenity={data}
onClick={(e) => addAmenity(e)}
>
<p>{text}</p>
{icon}
</div>
)
</>
})
)
/* CSS */
.amenity {
padding: 0.5rem 1rem;
display: flex;
align-items: center;
border-radius: 50px;
box-shadow: 5px 5px 10px #919191,
-5px -5px 10px #ffffff;
z-index: 4;
cursor: pointer;
}
.amenity-active {
background-color: var(--green);
}

Answer 1

The main problem is you are trying to pass data in a JSX element as you would do in html.
data-amenity={data}
React does work this way.So, e.currentTarget.dataset.amenity is always undeined.Instead, React uses refs to access dom elements. You can learn more about refs in the official React documentation. But in your case, you don't even need any ref as you can send data directly to any function. Check:
<div
className={`amenity ${active && `amenity-active`}`}
key={data}
// data-amenity={data}
onClick={() => addAmenity(data)}
>
<p>{text}</p>
</div>
and in addAmenity just receive it
const addAmenity = (incoming) => {
let dataItem = incoming
...
}
Below I provide the version of your code I fixed for you which is working perfect. Please let me know if this was helpful.
//Next js
import { useState } from 'react'
const amenitiesDefaultArr = [
{
data: "bathroom",
text: "Private Bathroom",
icon: <WcIcon fontSize="large" />,
active: false,
},
{
data: "dining",
text: "Dining Hall",
icon: <FastfoodIcon fontSize="large" />,
active: false,
},
{
data: "wifi",
text: "Wifi",
icon: <WifiIcon fontSize="large" />,
active: false,
}
]
const AddDorm = () => {
const [amenitiesList, setAmenitiesList] = useState(amenitiesDefaultArr)
const addAmenity = (incoming) => {
let dataItem = incoming
const tempList = amenitiesList.map(el => {
if (el.data === dataItem) el.active = !el.active
return el
})
console.log(tempList)
setAmenitiesList(tempList)
}
return (
<>
{
amenitiesList.map(el => {
const {data, text, icon} = el
let { active } = el
return (
<div
className={`amenity ${active && `amenity-active`}`}
key={data}
// data-amenity={data}
onClick={() => addAmenity(data)}
>
<p>{text}</p>
{icon}
</div>
)})}
</>
)
}
export default AddDorm