CODEWITHSUNDEEP
cssreactjscss-grid
pldesch
pldesch

Reputation: 43

React map function and CSS grid

Hy guys, I'm trying to make a css grid of 5 elements by column with this code in React. The problem is that css grid considers cartItem as one element of the grid but I'd like to have each div of cartItem (Img, Title, Price, Add, Delete) to be part of the grid. How could I do that ? Thanks

const Cartitems = (props) => {
  return (
    <div className={classes.Container}>
      <div></div>
      <div>Items</div>
      <div>Price</div>
      <div>Quantity</div>
      <div>Remove</div>
      {props.orders.map((val, i) => {
        return val.num === 0 ? null : (
          <CartItem number={val.num} color={val.color} />
        );
      })}
    </div>
  );
};

const CartItem = (props) => {
  return (
    <div className={classes.Container}>
        <div className={classes.Img}></div>
        <div className={classes.Title}>
          Surf style balance board {props.color}
        </div>
        <div className={classes.Price}>149.00€</div>
        <div className={classes.Add}>
          <div>–</div>
          {props.number}
          <div>+</div>
        </div>
        <div className={classes.Delete}>X</div>
    </div>
  );
};

Upvotes: 0

Views: 1460

Answers (1)

coreyward
coreyward

Reputation: 80041

Instead of wrapping the fields of your CartItem in a div you can use a React Fragment. This will result in all of the children of your cart items sitting adjacent to one another in the DOM:

const CartItem = (props) => {
  return (
    <>
        <div className={classes.Img}></div>
        <div className={classes.Title}>
          Surf style balance board {props.color}
        </div>
        <div className={classes.Price}>149.00€</div>
        <div className={classes.Add}>
          <div>–</div>
          {props.number}
          <div>+</div>
        </div>
        <div className={classes.Delete}>X</div>
    </>
  );
};

Note, instead of using <> and </> you can also use <React.Fragment> and </React.Fragment>. Same effect.

Another way to do this is using display: contents on the div wrapping your CartItem children, which will set each child on the parent grid. Unfortunately this has somewhat limited browser support and comes with some accessibility issues.

Upvotes: 3

Related Questions