QUESTION

I have a few photos saved as png files that are in the same folder as the React ponent and are imported correctly as well.

How and what would be a good practice way to display all the images, let's say there are 4 images, in their proper box shown in the picture below and have them be displayed side by side, along with their name/price aligned below the image.

Similar to craigslist's gallery setting when looking at posts with images.

Ex:

<img src={Logo} alt=“website logo”/>

<img src={Mogo} alt=“website mogo”/>

<img src={Jogo} alt=“website jogo”/>

<img src={Gogo} alt=“website gogo”/>

Could I do something with products.map((product, index, image?))...?

CODE

const Product = props => {
  const { product, children } = props;
  return (
    <div className="products">
      {product.name} ${product.price}
      {children}
    </div>
  );
};

function App() {
  const [products] = useState([
    { name: "Superman Poster", price: 10 },
    { name: "Spider Poster", price: 20 },
    { name: "Bat Poster", price: 30 }
  ]);

  const [cart, setCart] = useState([]);

  const addToCart = index => {
    setCart(cart.concat(products[index]));
  };

  const calculatePrice = () => {
    return cart.reduce((price, product) => price + product.price, 0);
  };

  return (
    <div className="App">
      <h2>Shopping cart example using React Hooks</h2>
      <hr />
      {products.map((product, index) => (
        <Product key={index} product={product}>
          <button onClick={() => addToCart(index)}>Add to cart</button>
        </Product>
      ))}
      YOUR CART TOTAL: ${calculatePrice()}
      {cart.map((product, index) => (
        <Product key={index} product={product}>
          {" "}
        </Product>
      ))}
    </div>
  );
}

QUESTION

I have a few photos saved as png files that are in the same folder as the React ponent and are imported correctly as well.

How and what would be a good practice way to display all the images, let's say there are 4 images, in their proper box shown in the picture below and have them be displayed side by side, along with their name/price aligned below the image.

Similar to craigslist's gallery setting when looking at posts with images.

Ex:

<img src={Logo} alt=“website logo”/>

<img src={Mogo} alt=“website mogo”/>

<img src={Jogo} alt=“website jogo”/>

<img src={Gogo} alt=“website gogo”/>

Could I do something with products.map((product, index, image?))...?

CODE

const Product = props => {
  const { product, children } = props;
  return (
    <div className="products">
      {product.name} ${product.price}
      {children}
    </div>
  );
};

function App() {
  const [products] = useState([
    { name: "Superman Poster", price: 10 },
    { name: "Spider Poster", price: 20 },
    { name: "Bat Poster", price: 30 }
  ]);

  const [cart, setCart] = useState([]);

  const addToCart = index => {
    setCart(cart.concat(products[index]));
  };

  const calculatePrice = () => {
    return cart.reduce((price, product) => price + product.price, 0);
  };

  return (
    <div className="App">
      <h2>Shopping cart example using React Hooks</h2>
      <hr />
      {products.map((product, index) => (
        <Product key={index} product={product}>
          <button onClick={() => addToCart(index)}>Add to cart</button>
        </Product>
      ))}
      YOUR CART TOTAL: ${calculatePrice()}
      {cart.map((product, index) => (
        <Product key={index} product={product}>
          {" "}
        </Product>
      ))}
    </div>
  );
}

• javascript
• html
• css
• reactjs
• react-hooks

• you can add those images inside your product ponent. Since they are related to that ponent. And you can wrap all your products with a div and then use css flex to align them – Sifat Haque Commented May 19, 2020 at 21:42
• @SifatHaque so to start, something like this? if this is along the right path, how do i extract the images from the same folder and have the be displayed along the rest of the name/price – mph85 Commented May 19, 2020 at 21:44

3 Answers 3

Wrap the list of products with a div (<div className="productsContainer">), and display it as a flex with wrap.

Set the width of the items (products) to 50% or less.

To render the image, render the <img> tag as one of the children, or add it directly to the product. Also change the data to include the src.

const { useState } = React;

const Product = ({ product, children }) => (
  <div className="products">
    {product.name} ${product.price}
    {children}
  </div>
);

function App() {
  const [products] = useState([
    { name: "Superman Poster", price: 10, logo: 'https://picsum.photos/150/150?1' },
    { name: "Spider Poster", price: 20, logo: 'https://picsum.photos/150/150?2' },
    { name: "Bat Poster", price: 30, logo: 'https://picsum.photos/150/150?3' }
  ]);

  const [cart, setCart] = useState([]);

  const addToCart = index => {
    setCart(cart.concat(products[index]));
  };

  const calculatePrice = () => {
    return cart.reduce((price, product) => price + product.price, 0);
  };

  return (
    <div className="App">
      <h2>Shopping cart example using React Hooks</h2>
      <hr />
      <div className="productsContainer">
        {products.map((product, index) => (
          <Product key={index} product={product}>           
            <img src={product.logo} alt="website logo" />
            
            <button onClick={() => addToCart(index)}>Add to cart</button>
          </Product>
        ))}
      </div>
      YOUR CART TOTAL: ${calculatePrice()}
      {cart.map((product, index) => (
        <Product key={index} product={product}>
          {" "}
        </Product>
      ))}
    </div>
  );
}

ReactDOM.render(
  <App />,
  root
);

* {
  box-sizing: border-box;
}

.productsContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.products {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 45%;
  margin: 0 0 1em 0;
  padding: 1em;
  border: 1px solid black;
}

.products img {
  margin: 0.5em 0;
}

<script crossorigin src="https://unpkg./react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Best way to display those side by side you can display it by giving css classes flex-row for horizontal view and flex-column for vertical view in the main div ponent

const Product = props => {
  const { product, children, image } = props;
  return (
    <div className="products">
      {product.name} ${product.price} ${product.image}
      {children}
    </div>
  );
};

products.map((product, index, image?))...?

Something along the lines of this?