[expand element] #react

el.jsx

(props) => {
  const [elHeight, setElHeight] = useState(0);
  const elRef = useRef(null);
  const onButtonClick = (e) => {
    elHeight ? setElHeight(0) : setElHeight(elRef.current.scrollHeight);
  };

  const elStyle = {
    maxHeight: elHeight,
  };

  return <>
    <div style={elStyle}></div>
    <button onClick={onButtonClick}>text</button>
    </>;
}

el.scss

height: auto;
max-height: 0;

overflow: hidden;

transition: max-height .5s ease;