title: How to check if a div is overflowing in react functional component
body: <p>I am trying to find out if a div has overflown text and show <code>show more</code> link if it does. I found <a href="https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows">this stackoverflow answer to check if a div is overflowing</a>. According to this answer, I need to implement a function which can access styles of the element in question and do some checks to see if it is overflowing. How can I access the styles of an element. I tried 2 ways</p>
  
  <p><strong>1. Using ref</strong></p>
  
  <pre><code>import React from "react";
  import "./styles.css";
  
  export default function App(props) {
    const [showMore, setShowMore] = React.useState(false);
    const onClick = () =&gt; {
      setShowMore(!showMore);
    };
  
    const checkOverflow = () =&gt; {
      const el = ref.current;
      const curOverflow = el.style.overflow;
  
      if ( !curOverflow || curOverflow === "visible" )
          el.style.overflow = "hidden";
  
      const isOverflowing = el.clientWidth &lt; el.scrollWidth 
          || el.clientHeight &lt; el.scrollHeight;
  
      el.style.overflow = curOverflow;
  
      return isOverflowing;
    };
  
    const ref = React.createRef();
  
    return (
      &lt;&gt;
        &lt;div ref={ref} className={showMore ? "container-nowrap" : "container"}&gt;
          {props.text}
        &lt;/div&gt;
        {(checkOverflow()) &amp;&amp; &lt;span className="link" onClick={onClick}&gt;
          {showMore ? "show less" : "show more"}
        &lt;/span&gt;}
      &lt;/&gt;
    )
  }
  </code></pre>
  
  <p><strong>2. Using forward ref</strong></p>
  
  <p><em>Child component</em></p>
  
  <pre><code>export const App = React.forwardRef((props, ref) =&gt; {
    const [showMore, setShowMore] = React.useState(false);
    const onClick = () =&gt; {
      setShowMore(!showMore);
    };
  
    const checkOverflow = () =&gt; {
      const el = ref.current;
      const curOverflow = el.style.overflow;
  
      if (!curOverflow || curOverflow === "visible") el.style.overflow = "hidden";
  
      const isOverflowing =
        el.clientWidth &lt; el.scrollWidth || el.clientHeight &lt; el.scrollHeight;
  
      el.style.overflow = curOverflow;
  
      return isOverflowing;
    };
  
    return (
      &lt;&gt;
        &lt;div ref={ref} className={showMore ? "container-nowrap" : "container"}&gt;
          {props.text}
        &lt;/div&gt;
        {checkOverflow() &amp;&amp; (
          &lt;span className="link" onClick={onClick}&gt;
            {showMore ? "show less" : "show more"}
          &lt;/span&gt;
        )}
      &lt;/&gt;
    );
  });
  </code></pre>
  
  <p><em>Parent component</em></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  import { App } from "./App";
  
  const rootElement = document.getElementById("root");
  const ref = React.createRef();
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App
        ref={ref}
        text="Start editing to see some magic happen! Click show more to expand and show less to collapse the text"
      /&gt;
    &lt;/React.StrictMode&gt;,
    rootElement
  );
  </code></pre>
  
  <p>But I got the following error in both approaches - <code>Cannot read property 'style' of null</code>.
  What am I doing wrong? How can I achieve what I want?</p>