I'm trying to create an image overlay with no scroll, and I therefore need to style the body when my li is active. I'm trying to do this through Helmet, but it's not working. It just says <body class=""> in the browser—no matter if a li is active or not.
The component:
import React, { useState } from "react"
import { Helmet } from "react-helmet"
export default function ToggleActive({ children, size }) {
const [isActive, setActive] = useState("false")
const handleToggle = () => {
setActive(!isActive)
}
return (
<li className={isActive ? size : "active"} onClick={handleToggle}>
<Helmet>
<body className={isActive ? null : "no-scroll"} />
</Helmet>
{children}
<button onClick={handleToggle} />
</li>
)
}
What's wrong here?