title: Cannot read property 'offsetWidth' of null?
body: <p>i am trying to covert a small jquery component to react .but i am getting this issue <strong><code>Cannot read property 'offsetWidth' of null</code></strong></p>
  <p>here is jquery simple component
  <a href="http://jsfiddle.net/abhitalks/860LzgLL/" rel="nofollow noreferrer">http://jsfiddle.net/abhitalks/860LzgLL/</a></p>
  <p>what component does it show &quot;menu or tab list&quot; .If window screen is decrease it hide menu and move to dropdown like this
  <a href="https://i.stack.imgur.com/vktnM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vktnM.png" alt="enter image description here" /></a></p>
  <p>I tried to implement is react .</p>
  <p>My approach is</p>
  <ol>
  <li>First i am calculate the width of <code>li</code>'s or sum of all width of li.</li>
  <li>Also get the width of container.</li>
  <li>if sum of li width is greater I <code>set the threshold</code> . render using threshold value</li>
  </ol>
  <p>but when I am resize my component I am getting below error</p>
  <p>**Cannot read property 'offsetWidth' of null **</p>
  <p>here is my code
  <a href="https://stackblitz.com/edit/react-wmtunp?file=src%2FApp.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-wmtunp?file=src%2FApp.js</a></p>
  <pre><code>import React, { useState, useRef, createRef, useEffect } from 'react';
  import './style.css';
  
  const data = [
    'Option One',
    'Option_hellodummyhhhsdshshshd',
    'Option Three',
    'Option Four',
    'Option Five'
  ];
  
  export default function App() {
    const [state, setState] = useState(data);
    const [threshold, setThreshold] = useState(-1);
  
    const liRefs = useRef([]);
    const ulRef = useRef(null);
  
    liRefs.current = state.map((_, i) =&gt; liRefs.current[i] ?? createRef());
  
    const adjustItems = function() {
      var skipLoop = false,
        w2W = ulRef.current.offsetWidth,
        index = -1,
        totalW = 0;
      liRefs.current.map(function(li, key) {
        if (skipLoop) {
          return;
        }
        totalW += li.current.offsetWidth;
        if (totalW &gt; w2W) {
          skipLoop = true;
          index = key;
        }
        setThreshold(index);
      });
    };
    useEffect(() =&gt; {
      adjustItems();
      window.addEventListener('resize', adjustItems);
      return () =&gt; window.removeEventListener('resize', adjustItems);
    }, []);
    return (
      &lt;div&gt;
        &lt;ul id=&quot;menu&quot; ref={ulRef}&gt;
          {state.map((i, index) =&gt;
            threshold == -1 ? (
              &lt;li ref={liRefs.current[index]} key={index}&gt;
                {i}
              &lt;/li&gt;
            ) : threshold !== -1 &amp;&amp; threshold &gt;= index ? (
              &lt;li ref={liRefs.current[index]} key={index}&gt;
                {i}
              &lt;/li&gt;
            ) : (
              &lt;&gt;&lt;/&gt;
            )
          )}
        &lt;/ul&gt;
        &lt;ol&gt;
          &lt;li&gt;
            Collected
            &lt;ul id=&quot;submenu&quot;&gt;
              {state.map((i, index) =&gt;
                threshold !== -1 &amp;&amp; threshold &lt;= index ? (
                  &lt;li ref={liRefs.current[index]} key={index}&gt;
                    {i}
                  &lt;/li&gt;
                ) : (
                  &lt;&gt;&lt;/&gt;
                )
              )}
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ol&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>My functionality break when I am resizing the window.
  I am new in react js .Is there problem in my approach ?
  any suggestion ?</p>