This is a snippet of my code in a component. I'm trying to make a component whose height will change when the prop changes. How to fix the error? Property 'style' does not exist on type 'MutableRefObject'
const bottom = useRef(null)
useEffect(() => {
active ?
bottom.style.maxHeight = '120px'
:
bottom.style.maxHeight = '0px'
}, [active])
return (
<div ref={bottom}></div>
)
const bottom = useRef<HTMLDivElement>(null)
useEffect(() => {
if (bottom.current) {
bottom.current.style.maxHeight = active ? '120px': '0'
}
}, [active])
useRefbottom.current
Okay. I made 2 mistakes in my code, because of which it did not work. I'm still a beginner typescript developer. Final version of my code:
const bottom = useRef<HTMLDivElement>(null)
useEffect(() => {
if (bottom.current) {
active ?
bottom.current.style.maxHeight = bottom.current.scrollHeight + 'px'
:
bottom.current.style.maxHeight = '0px'
}
}, [active])
return (
<div ref={bottom}></div>
)
any is not a solution, it disables typescript.Since Tailwind supports dynamic classnames you can set the className based on a state variable.
So you could have active be a state variable like this:
const [active, setActive] = useState(false);
And then your div can have it's maxHeight set based on the active variable:
<div
className={`transition ${active ? "max-h-[10px]" : "max-h-[30px]"}`}
/>
Many of the other answer suggested using refs to directly manipulate the DOM, but this is really not the React way to approach this. You should (almost) never need to directly manipulate the DOM and this case is no exception.
