title: Headings must have content and the content must be accessible by a screen reader
body: <p>I've created a react web application which has an HTML body content inside home.js as below,</p>
  <pre><code>class Home extends React.Component {
  render() {
  return (
    &lt;div&gt;
      &lt;nav-bar-component&gt;&lt;/nav-bar-component&gt;
      {/* &lt;!-- Trigger/Open The Modal --&gt; */}
  
      {/* &lt;!-- banner --&gt; */}
      &lt;header id=&quot;banner&quot;&gt;
        &lt;div id=&quot;banner_contents&quot;&gt;
          &lt;h1 id=&quot;banner_title&quot;&gt;&lt;/h1&gt;
          &lt;div id=&quot;banner_buttons&quot;&gt;
            &lt;div id=&quot;banner_button_play&quot;&gt;Play&lt;/div&gt;
            &lt;div id=&quot;banner_button&quot;&gt;My List&lt;/div&gt;
          &lt;/div&gt;
          &lt;p id=&quot;banner_description&quot;&gt;&lt;/p&gt;
        &lt;/div&gt;
        &lt;div id=&quot;banner_fadeBottom&quot;&gt;&lt;/div&gt;
      &lt;/header&gt;
  
      {/* &lt;!-- trending now row --&gt; */}
      &lt;div id=&quot;trending_head_row&quot;&gt;
        &lt;div class=&quot;trending_row&quot;&gt;
          &lt;h2 class=&quot;trending_row_title&quot;&gt;&lt;/h2&gt;
          {/* &lt;!-- &lt;h1 class=&quot;trending_number&quot;&gt;&lt;/h1&gt; --&gt; */}
          &lt;div class=&quot;trending_row_posters&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      {/* &lt;!-- rows --&gt; */}
      &lt;div id=&quot;headrow&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
          &lt;h2 class=&quot;row_title&quot;&gt;&lt;/h2&gt;
          &lt;div class=&quot;row_posters&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
        {/* &lt;!-- Modal content --&gt; */}
        &lt;div class=&quot;modal-content&quot;&gt;
          &lt;span class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;
          &lt;header id=&quot;movie_cover&quot;&gt;&lt;/header&gt;
          &lt;div id=&quot;modal_fadeBottom&quot;&gt;&lt;/div&gt;
          &lt;h1 id=&quot;selected_banner_title&quot;&gt;&lt;/h1&gt;
          &lt;p id=&quot;selected_banner_description&quot;&gt;&lt;/p&gt;
          &lt;div id=&quot;info_box&quot;&gt;
            &lt;p id=&quot;movie_cast&quot;&gt;&lt;/p&gt;
            &lt;br /&gt;
            &lt;p id=&quot;movie_genre&quot;&gt;&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;h1&gt;Trailer&lt;/h1&gt;
          {/* &lt;!-- &lt;div id=&quot;trailer_box&quot;&gt;&lt;/div&gt; --&gt; */}
          &lt;iframe title=&quot;trailer_video&quot; id=&quot;trailer&quot;&gt;&lt;/iframe&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>}
  }</p>
  <p>The <code>&lt;h1&gt;</code> and the other heading tags are empty because I'm getting data from an API and by using the <strong>innerText</strong> function I'm assigning values for them in another js file (function.js). When I try to build my app using <em>npm run build</em> command I get these errors</p>
  <pre><code>Line 13:13:  Headings must have content and the content must be accessible by a 
  screen reader  jsx-a11y/heading-has-content
  Line 26:13:  Headings must have content and the content must be accessible by a 
  screen reader  jsx-a11y/heading-has-content
  Line 35:13:  Headings must have content and the content must be accessible by a 
  screen reader  jsx-a11y/heading-has-content
  Line 46:13:  Headings must have content and the content must be accessible by a 
  screen reader  jsx-a11y/heading-has-content
  </code></pre>
  <p>Please help me!!!</p>