react is using global var instead of given information when other information is working fine

Issue

The firstBook and the secondBook has its own different infomation when i invoked this information in the book which will display on the screen everything shows correct information except the image.

In the code it has a line const img = "link".

both books use the link from that img var not form the list when i tried with commenting that line it shows the error

const firstBook = {
  img: "https://images-na.ssl-images-amazon.com/images/I/81wgcld4wxL._AC_UL210_SR195,210_.jpg",
  title: "Atomic Habits",
  author: "James Clear",
  price: "12.00"
};


const secondBook = {
  img: "https://images-na.ssl-images-amazon.com/images/I/51bUnMij9mL._SX322_BO1,204,203,200_.jpg",
  title: "It Ends with Us: A Novel",
  author: "Collen Hoover",
  price: "10.00",
};


**// why this is using as the default as the image link ? [enter image description here][1]**

const img =
  "https://images-na.ssl-images-amazon.com/images/I/51bUnMij9mL._SX322_BO1,204,203,200_.jpg";

// main function book 

function Booklist() {
  
  return (
    <section className="booklist">
      <Book
        img={firstBook.img}
        title={firstBook.title}
        author={firstBook.author}
        price={firstBook.price}
      />

      <Book
        img={secondBook.img}
        title={secondBook.title}
        author={secondBook.author}
        price={secondBook.price}
      />
    </section>
  );
}


const Book = (props) => {

  return (
    <article className="book">
      <img src={img} alt="" />
      <h1>{props.title}</h1>
      <h4>{props.author}</h4>
      <h6>price: ${props.price}</h6>
    </article>
  );
}
ReactDOM.render(<Booklist/>,document.getElementById('root'))

Solution

You are referencing the const img you declared rather than the img passed in as a prop to Book. Like your other props, change your <img src={img} /> to <img src={props.img} />

Answered By - gloo