CODEWITHSUNDEEP
reactjs
maverick
maverick

Reputation: 800

React: background image won't show

I'm new at React.

I'm trying to show some images from an array. But I can't figure out what is wrong or what I'm doing wrong here...

Heres my code:

function Product(props) {
  const content = props.products.map((product) =>
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12">
                    <div className="product-item">
                        <div className="product-item_img" style={productImg} data-product-image={product.img}>
                            <div className="product-item_img__view">
                                <button className="button button_g" data-toggle="#modal">View details</button>
                            </div>
                        </div>
                        <header className="product-item_header" data-product-name={product.header}>{product.header}</header>
                        <div className="product-item_desc">{product.desc}</div>
                        <footer className="product-item_footer">{product.price}</footer>
                    </div>
    </article>
  );
  return (
    <div className="flex-row">
      {content}
    </div>
  );
}

const products = [
  {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"},
  {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"}
];

const productImg = {
    backgroundImage: 'url(' + products.img +')'
};

ReactDOM.render(
  <Product products={products} />,
  document.getElementById('content')
);

Upvotes: 0

Views: 630

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104359

Issue is, products is an array, to access the img you need to specify the index also, like this:

const productImg = {
    backgroundImage: 'url(' + products[index].img +')'
};

You are passing the products array in component, so instead of using it like, define the backgroundImage in the component itself. Try this:

function Product(props) {
  const content = props.products.map((product) =>
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12">
      <div className="product-item">
          <div className="product-item_img" style={{background: 'url('+ product.img + ') 50% 10% no-repeat', height: '200px', width: '200px'}} data-product-image={product.img}>
              <div className="product-item_img__view">
                  <button className="button button_g" data-toggle="#modal">View details</button>
              </div>
          </div>
          <header className="product-item_header" data-product-name={product.header}>{product.header}</header>
          <div className="product-item_desc">{product.desc}</div>
          <footer className="product-item_footer">{product.price}</footer>
      </div>
    </article>
  );
  return (
    <div className="flex-row">
      {content}
    </div>
  );
}

const products = [
  {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"},
  {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"}
];

ReactDOM.render(
  <Product products={products} />,
  document.getElementById('content')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div id='content'></div>

Upvotes: 1

gor181
gor181

Reputation: 2068

Something as follows would do:

function Product(props) {
  const content = props.products.map((product) =>
    <article key={product.id} className="item-lg-3 item-md-6 item-sm-6 item-xs-12">
      <div className="product-item">
        <div className="product-item_img" style={getProductImageStyle(product)} data-product-image={product.img}>
        <div className="product-item_img__view">
          <button className="button button_g" data-toggle="#modal">View details</button>
        </div>
      </div>
      <header className="product-item_header" data-product-name={product.header}>
        {product.header}
      </header>
      <div className="product-item_desc">{product.desc}</div>
      <footer className="product-item_footer">{product.price}</footer>
      </div>
    </article>
  );
  return (
    <div className="flex-row">
      {content}
    </div>
  );
}

const products = [
  {id: 1, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Hello World', desc: 'Welcome to learning React!', price: "$ 999.00"},
  {id: 2, img: 'https://cdn.stayhard.com/storage/ma/469381f40f20434bb5ab0eadce937803/5f53203dfc9b4d94b68880d3af79ab25/3200-3872-0-jpg.Jpeg/F51A68C2AE2FC6A99C4D52BEE2F66FBA650BFAF2/04247543_display.jpeg', header: 'Installation', desc: 'You can install React from npm.', price: "$ 699.00"}
];

const getProductImageStyle = product => ({
  backgroundImage: 'url(' + product.img +')'
});

ReactDOM.render(
  <Product products={products} />,
  document.getElementById('content')
);

I wrote this from top of my head, so not sure whether it works by just copy paste.

Anyways, try and let us know.

Upvotes: 1

Related Questions