title: Display a div only if another div has content (React)
body: <p>I have 3 div :</p>
  
  <ul>
  <li>a container (typing-container)</li>
  <li>a div that displays an animation of someone writing* (typing-indicator)</li>
  <li>a div that shows the usernames of people writing (typing-names)</li>
  </ul>
  
  <p>Here's a part of the code of the component : </p>
  
  <pre><code>&lt;div
    className="typing-container"
  &gt;
    &lt;div
      className="typing-indicator"
    &gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div
      id="typing-names"
    &gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>I want to display the typing-indicator div only if typing-names div has content</strong> </p>
  
  <p>Something like this, but I don't know how to put it in React (with Hooks),</p>
  
  <pre><code>if (document.getElementByid("typing-names").innerHTML !== "") {
    document.getElementsByClassName("typing-indicator")[0].style.display = "none";
  } else {
    document.getElementsByClassName("typing-indicator")[0].style.display = "block"; 
  }
  </code></pre>
  
  <p><strong>But how can I do this in React ? And please no jQuery !</strong></p>
  
  <p>*Link of animation if you want to see it : <a href="https://www.google.com/search?q=message%20typing%20css&amp;rlz=1C1CHBD_frFR755FR755&amp;sxsrf=ACYBGNTAK7JVbTZYCL53oXza1zM4c9isXw:1574531740368&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=2ahUKEwjsvsno84DmAhWrx4UKHT1LCPQQ_AUoAXoECAwQAw&amp;biw=1920&amp;bih=937#imgrc=Bd1G1Ka8LZ3JKM:" rel="nofollow noreferrer">https://www.google.com/search?q=message+typing+css&amp;rlz=1C1CHBD_frFR755FR755&amp;sxsrf=ACYBGNTAK7JVbTZYCL53oXza1zM4c9isXw:1574531740368&amp;source=lnms&amp;tbm=isch&amp;sa=X&amp;ved=2ahUKEwjsvsno84DmAhWrx4UKHT1LCPQQ_AUoAXoECAwQAw&amp;biw=1920&amp;bih=937#imgrc=Bd1G1Ka8LZ3JKM:</a></p>