Contribute your card components

[tpemartin]

Set up

1. Fork this repo and save the final branch in your local drive.
2. Put your Card/ component folder under `src/components
3. You Card component function must start with

   export default function Card2({ user }) {
    const { name, grade, imgSrc, wish, id } = user

   and its return jsx must have its first child element as:

   <div id={`${id}`}></div>

   • See https://github.com/tpemartin/econWish/blob/9d1e271d8856d175838e60f1c0a294818aa24759/src/components/Card2/index.jsx#L37

Test

In src/App.jsx change

import Card2 from './components/Card2';

to

import Card2 from './components/{your card folder name}';

Then execute the app. If it properly functions, you can submit your app, but

• Commit and Push to branch final of your fork repo

And post your fork repo link and list your component folders.

[tpemartin]

Martin https://github.com/tpemartin/econWish/tree/final

/Card2

[linttttt]

linttttt https://github.com/linttttt/econWish/tree/final

/Finalcard /Seal2

[AndreiaMagalhaes]

Andreia https://github.com/AndreiaMagalhaes/econWish/tree/final

/CardAndreia

(link for the app: https://andreiamagalhaes.github.io/econWish/ )

[mirkorivas]

Mirko https://github.com/mirkorivas/econWish/tree/final (repo) /CardMirko

https://mirkorivas.github.io/econWish/ (app link)

PS: Probably due to the huge amount of cards that are created, our apps were extremely slow when we were trying to modify them. We added an "if" to "const cards" (so that cards would only be created for complete users) because many of the users did not have all the necessary information (name, wish, image, ...).

//Make sure that all user (e) values aren't null, undefined, "" and " " `const cards = users.map((e, i) => { if (!Object.values(e).includes(null) && !Object.values(e).includes(undefined) && !Object.values(e).includes('') && !Object.values(e).includes(' ')) { return (

        )
    }
})`

If you encounter the same issue, then you could include those lines ✌️✌️ (it's in app.jsx --> function AppContent --> const cards)

[tpemartin]

Mirko

https://github.com/mirkorivas/econWish/tree/final (repo)

/CardMirko

https://mirkorivas.github.io/econWish/ (app link)

PS:

Probably due to the huge amount of cards that are created, our apps were extremely slow when we were trying to modify them. We added an "if" to "const cards" (so that cards would only be created for complete users) because many of the users did not have all the necessary information (name, wish, image, ...).

//Make sure that all user (e) values aren't null, undefined, "" and " "

`const cards = users.map((e, i) => { if (!Object.values(e).includes(null) && !Object.values(e).includes(undefined) && !Object.values(e).includes('') && !Object.values(e).includes(' ')) {

return (

<GalleryItem key={i}>

    <Card2 user={e} />

</GalleryItem>

        )

    }

})`

If you encounter the same issue, then you could include those lines ✌️✌️ (it's in app.jsx --> function AppContent --> const cards)

Hi Mirko, the problem is from my backend. I have fixed that. Glad you noticed the problem.