It's hard to know the exact reasons why - I think a good first step is to have Eslint set up so that your code is styled nicely. If you look inside of PhotoGallery.jsx some of the lines of code in there are really long.
Other things I noticed in that file:
You had some inline onlicks - onClick={e => {e.stopPropagation(); handleDelete(p.id)}} I think would have been better to extract these into proper functions like you did for other things
You had a <h1 title={p.title}>{p.title}</h1> - not sure if that's a Tailwind thing, but do you. need to be passing it in more than once?
In Modal.jsx:
Both of your usages of ModalPop passed in the same null argument, maybe you could have skipped passing it in if it's always going to be null. And rename it to onCloseModal
I think adding some unit tests also goes a long way.
It's hard to know the exact reasons why - I think a good first step is to have Eslint set up so that your code is styled nicely. If you look inside of
PhotoGallery.jsx
some of the lines of code in there are really long.Other things I noticed in that file:
onClick={e => {e.stopPropagation(); handleDelete(p.id)}}
I think would have been better to extract these into proper functions like you did for other things<h1 title={p.title}>{p.title}</h1>
- not sure if that's a Tailwind thing, but do you. need to be passing it in more than once?In
Modal.jsx
:ModalPop
passed in the samenull
argument, maybe you could have skipped passing it in if it's always going to be null. And rename it toonCloseModal
I think adding some unit tests also goes a long way.
amazing ! thank you for the feedback❤️