Day 3 of 100days of code.😎

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 👇👇