Kevin Powell - Community•10mo ago

Help me, help you, by helping me, so I don't ask so many questions(yep?)

Here's the site: https://anglian-online.netlify.app/ Here's the code: https://github.com/callum-laing/shopping-site My question? glad you asked. See image for a detailed explanation. I created a grid with 3 columns, I was expecting each column to host 1 image/card, however it appears each column is hosting 3 image/cards. First time attempting this, and I googled 99.95% of it, so I'm sure the code is wrong in probably the app/components/Card.js, but I can't figure out what is wrong.

57 Replies

Matt•10mo ago

I'm not a professional by any means

majkl•10mo ago

Look where you have div..page_cards__DAsUi.

Matt•10mo ago

but I'm 99% sure you're only suppose to have 1 main tag per page. You can achieve what youre looking to do with one grid not having multiples. Also why did you nest grids? (main > div)

majkl•10mo ago

You are using the same class with grid-template-columns:repeat(3,1fr) on parent and child.

CDLOP•10mo ago

I'm as confused as you both are I think I've combined 2 solutions into 1 with my googling

MarkBoots•10mo ago

your shop/page.jsx is mapping over all posts to create a card component, but the card component is mapping over all posts as well. so you're doing it double

majkl•10mo ago

CDLOP•10mo ago

hmm I might need to rip it down and try it again then seems it's quite messy

majkl•10mo ago

I second that idea. 😄

CDLOP•10mo ago

It's my first A) proper react app, B) nextjs app and C) attempting this layout lol

majkl•10mo ago

Sure thing, that is how one learns.

CDLOP•10mo ago

uff, I've actually no idea how to do this now haha What I'm trying to do: take the id from the data.js file, and create a card for every id in the data.js file's array, but have it show as a 3 column grid, so item | item | item and I'm extremely confused

majkl•10mo ago

How does it generate the classes? For starters, just make them different (ir do not generate that div twice).

CDLOP•10mo ago

well this is part of the issue, I really don't know, at all, how to do this, the entire thing is brand new to me lol. I think I map through the array and create a new card for every item in items, but how to put that into the correct positions in grid is what' sconfusing me most

majkl•10mo ago

I mean, Matt was right, the main is present in great abundance.

CDLOP•10mo ago

yea I've removed basically all of it, so I'm back to the basics on shop

majkl•10mo ago

I bet it is going to be some very stupid omission. It just happens. 😄

CDLOP•10mo ago

I probably should've tried doing this in vanilla first I went straight into nextjs and now my brain is on fire lol

vince•10mo ago

I didn't read most of this but add complexity after you get things working Like, make the page that you want using regular html css js (inside next) and then start adding the logic and components after

CDLOP•10mo ago

right now I'm just trying to figure out how I create a list of arrays in a data.js file, and then map that list of arrays into their own cards, and I'm struggling even there lol

b1mind•10mo ago

rofl now I need the code se

// shop/page
    <main className={Styles.shopContainer}> 
        {posts.map((post) => (
 
          <div key={post.id} className={Styles.card}>
            <img className="imgCard" src={`/cleats.jpg`} alt={post.name} />
            <h2>{post.name}</h2>
            <p>${post.price}</p>
            <button>Add to Cart</button>
          </div>
        ))}
    </main>

// shop/page
    <main className={Styles.shopContainer}> 
        {posts.map((post) => (
 
          <div key={post.id} className={Styles.card}>
            <img className="imgCard" src={`/cleats.jpg`} alt={post.name} />
            <h2>{post.name}</h2>
            <p>${post.price}</p>
            <button>Add to Cart</button>
          </div>
        ))}
    </main>

Ok so we need the .card child err no .cards parent

CDLOP•10mo ago

evanescance - bring me to life, just came on, so we can't mess this up

b1mind•10mo ago

and it needs to be where? You need to add .cards based on your css. I'll let you try first

CDLOP•10mo ago

the css is based on the previous answer from googling, so it might need re-doing

b1mind•10mo ago

I mean its fine

CDLOP•10mo ago

as there's no card.js file anymore

b1mind•10mo ago

lets get there first we are in CSS land this is only from what I see in /stores

CDLOP•10mo ago

ah ok ok

b1mind•10mo ago

sry shop/***.css and .jsx only two files we are working with 😉

CDLOP•10mo ago

I think cards could be shopContainer tbh?

b1mind•10mo ago

yea if you wanna make that refactor do it to it

CDLOP•10mo ago

cards was just a wrapper to add a grid

b1mind•10mo ago

then you wont have to add another div 😉 you got this

CDLOP•10mo ago

yea doesn't make sense to ahve a main, then a div wrapper inside that I think that actually fixed it, yknow.

b1mind•10mo ago

so you are combining .shoping container into .cards? then what (missing one step)

CDLOP•10mo ago

.shopContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 20px;
    height: 100vh;
}

.shopContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 20px;
    height: 100vh;
}

CDLOP•10mo ago

b1mind•10mo ago

boom!

CDLOP•10mo ago

just had to remove cards, move grid-template-columns into .shopContainer, and done

b1mind•10mo ago

<div className={Styles.cards}> hint to the one more step one letter fix 😂 ok two hints bad teacher

CDLOP•10mo ago

where are you seeing that?

b1mind•10mo ago

in the code above, that I got you started with. I can only see past code remember so I'm working off only that block of code and teh css file actually

CDLOP•10mo ago

I have

import React from "react";
import Styles from "./page.module.css";
import posts from "../data";

const Shop = () => {
  return (
    <main className={Styles.shopContainer}>
      {posts.map((post) => (
        <div key={post.id} className={Styles.card}>
          <img className="imgCard" src={`/cleats.jpg`} alt={post.name} />
          <h2>{post.name}</h2>
          <p>${post.price}</p>
          <button>Add to Cart</button>
        </div>
      ))}
    </main>
  );
};

export default Shop;

import React from "react";
import Styles from "./page.module.css";
import posts from "../data";

const Shop = () => {
  return (
    <main className={Styles.shopContainer}>
      {posts.map((post) => (
        <div key={post.id} className={Styles.card}>
          <img className="imgCard" src={`/cleats.jpg`} alt={post.name} />
          <h2>{post.name}</h2>
          <p>${post.price}</p>
          <button>Add to Cart</button>
        </div>
      ))}
    </main>
  );
};

export default Shop;

b1mind•10mo ago

yup you got it

CDLOP•10mo ago

with

.shopContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 20px;
    height: 100vh;
}


.card {
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
}

.imgCard {
    width: 100%;
    height: auto;
}

.btn {
    background-color: #4caf50;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #45a049;
}

.shopContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    gap: 20px;
    height: 100vh;
}


.card {
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
}

.imgCard {
    width: 100%;
    height: auto;
}

.btn {
    background-color: #4caf50;
    color: white;
    padding: 10px;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #45a049;
}

b1mind•10mo ago

looks good mate! 👏 NOW make a Card component 🤣

CDLOP•10mo ago

-.-

b1mind•10mo ago

no really and make another ugly module file and put that .card {} css in it and learn how to use a component proper <,<;; But remember if its not used anywhere else its a hasty abstraction and you are doing cause I told you only for practice.

CDLOP•10mo ago

I mean would i not just cut the code in shop, into the card component, then just import the card component into shop, and use props?

b1mind•10mo ago

but you do need to understand it and this is good as place as any cause you have "just html" working Idk thats on you 😄 I don't wanna think that hard

CDLOP•10mo ago

lmao

b1mind•10mo ago

hey I got my own shit 🤣 working on my project too atm

CDLOP•10mo ago

damn svelte brain 😛

b1mind•10mo ago

Also I never said couldn't write React.. Just I rather have it easy with :svelte: 😂 without all the ugly boiler plate bs (nd jsx, and all the wrappers needed just to use it.. "ecosystem of trash wrappers on the ground" All these concepts are the same, learning components, reactivity(or what passes for it in React), page/component life cycles. Its all transferable really 😄 gah I'm spicy today >.>;

CDLOP•10mo ago

yeah I'm still picking up react, but ill jump back to svelte once ive buitl 3-4 things and am comfortable until then.. embracing the pain

b1mind•10mo ago

Marks as solved. 🖖

CDLOP•10mo ago

I can actually sleep now, this is great thanks all 👌

Gaming

Programming

Help me, help you, by helping me, so I don't ask so many questions(yep?)