title: es6 template string render element based on endpoint response
body: <p>I am rather new to ES6 and template literals etc... and was hoping to get some advice. I have an endpoint that gives me an array of objects that I am using to display certain student information. Within each object a student has a star rating. Long story short I want to take the rating number I get back from the endpoint and loop through that and display a star rating for them 1-5 stars. My endpoint and everything is working fine but I am struggling with outputting the html from the for loop. Any suggestions and or tips would be greatly appreciated. </p>
  
  <p><strong>My es6 file contains the following:</strong></p>
  
  <pre><code>renderStudentRating = (studentRating) =&gt; {
    let rating = studentRating;
  
    for (let i = 0; i &lt;= rating; i ++) {
      // should output an element based on rating count 
      &lt;i class="student-star"&gt;&lt;/i&gt;
    }
  };
  
  &lt;span class="student-rating-info"&gt;
    &lt;div id="rating"&gt;
      ${renderStudentRating(`${student.rating}`)}
    &lt;/div&gt;
  &lt;/span&gt;
  </code></pre>