React Star Rating Function: Image Not Displaying

Sincerest apologies to those who spent time and energy answering my previous question. I originally assumed I wasn't going to get help so I started working on it myself. I got pretty far so I'd rather not rebuild what I've done from the ground up.

This react component is a row of stars. When the user clicks a star, it and all previous stars go from empty to full. If star 2 is clicked, both star 1 and 2 become full, etc. This ALMOST works. Here is my code:

import React, { Component } from "react";

class Starset0 extends Component {



rate = event => {
    const {id} = event.target;

    console.log("You clicked: " + id);
    var i;

    for (i = 1; i < parseFloat(id) + 1; i++) { 
console.log("I should change the following: " + i);
document.getElementById(i).setAttribute("src", "{require('./full-star.png')}"); 

//okay, so you've...kinda got it working...kind of

}

  };

  render() {
    return (

        <div id = "rating0">
<img onClick = {this.rate} class = "star" id = "1" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "2" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "3" src = {require('./empty-star.png')} />
<img onClick = {this.rate} class = "star" id = "4" src = {require('./empty-star.png')}/>
<img onClick = {this.rate} class = "star" id = "5" src = {require('./empty-star.png')}/>

</div>

      );
  }
}

export default Starset0;

The problem is, instead of stars becoming full, they simply cease to render. They are replaced with that image-not-found icon. Why is this? If I replace the source attribute manually, it displays the full star.

2 answers

  • answered 2018-07-12 08:03 Bharath

    Try changing this

    "{require('./full-star.png')}"
    

    to

    {require('./full-star.png')}
    
    
    
    "{require('./full-star.png')}" is executed as string. so its not fetching the image.
    

  • answered 2018-07-12 08:07 xadhix

    Externalize require statement and use it as a variable.

    Try this

      import React, { Component } from "react";
    
      class Starset0 extends Component {
    
        const fullStarSrc = require('./full-star.png');
        const emptyStarSrc = require('./empty-star.png');
    
        rate = event => {
          const { id } = event.target;
    
          console.log("You clicked: " + id);
          var i;
    
          for (i = 1; i <= 5; i++) {
            if(i <= parseInt(id)) {
              console.log("I should change the following: " + i);
              document.getElementById(i).setAttribute("src", 
      fullStarSrc);
            }
            else {
              console.log("I should change the following: " + i);
            document.getElementById(i).setAttribute("src", 
      emptyStarSrc);
            }
    
    
            //okay, so you've...kinda got it working...kind of
    
          }
    
        };
    
        render() {
          return (
    
            <div id="rating0">
              <img onClick={this.rate} class="star" id="1" src= 
     {emptyStarSrc} />
              <img onClick={this.rate} class="star" id="2" src= 
     {emptyStarSrc} />
              <img onClick={this.rate} class="star" id="3" src= 
     {emptyStarSrc} />
              <img onClick={this.rate} class="star" id="4" src= 
     {emptyStarSrc} />
              <img onClick={this.rate} class="star" id="5" src= 
     {this.emptyStarSrc} />
    
            </div>
    
          );
        }
      }
    
      export default Starset0;