How I started Day 3.
It's just the third day and I feel like my brain is gonna explode already🤯😄. So I started today by converting the pizzas menu to a fruits menu page to test my knowledge on the concepts learnt so far. This time I created a component folder for my components and just imported them so I can see clearly😥.
See what it looks like. My rainbow of fruit🥰👇👇
Also added a little bit of responsiveness for mobile and tablet view. Then here I was trying out the outline-offset on the sold-out images 🙆♀️.
Additional concepts Learnt
Destructuring of Props:
We destructure props (property) to extract values from the props objects or arrays passed down to a component. This allows us to use the properties directly without needing to reference them via the props object. There are several patterns we see when accessing props in React .
- First is destructing in the component parameter which is arguably the most common method at Line 23😶.👇
So the footer component was getting so long and I created a new component on line 23 and use at line 12 to make it simple. I encountered a problem after this being that the new component (Order) needed both the closeHour and openHour values 😑. So what now??. Yeah you got it right pass some props🎉🙌. But this time we destructure in the component parameter at Line 23 👆👆. It is very important you remember the object notation in the parenthesis i.e ({ closeHour, openHour}) and not (closeHour, openHour).
So let me do some changes and show you what it looks like when directly accessing props and referencing the object at Line 23👇👇.Then ctrl z😄.
- Second way to destructure props is to destructure in the component body. Let me show you an example at line 24👇👇. I think I like this too.
Then there's something about using the rest operator something like ({ closeHour, ...rest}) but not much I know🤷♀️.
Applying CSS classes dynamically:
From my rainbow of fruit menu, you can see that the text for the sold out items is Red and the images have some outline-offset property. This is because I used the template literal and ternary operator to check if the "fruitObj.soldOut" condition evaluates to true or false and conditionally render the className sold-out at line 53 👇👇
Thanks for reading🙏. To be continued.....