London 10 | Abubakar-Meigag | React | react-hotel-project #610
Conversation
for search button and import this button in search JS
- create new component for heading - import it in App JS - create new images folder and add logo image - add the logo to the header - styling the header in App CSS
- add styling for the logo and font for the logo title - add 3 images for cards - create TouristInfoCards component to create the cards - add styling for the cards - create button on each card and link it to websites when we clicked
- create Footer component - then add array as props - then display it as list in bottom of the page
create anther button or id search
all the table is display with using data file
display all the data in table install moment and use moment to get number of nights
create new component and move the button
create order component and style the order element
| @@ -3,6 +3,8 @@ | |||
| "version": "0.1.0", | |||
| "private": true, | |||
| "dependencies": { | |||
| "axios": "^1.4.0", | |||
| "moment": "^2.29.4", | |||
There was a problem hiding this comment.
Really nice that you've started learning about axios 👍
Not a good practice to push dependencies, can you do a bit of study on how to manage dependencies and exclude them from version control using Git.
src/App.js
Outdated
| <Bookings name /> | ||
| <Restaurant /> | ||
| <FooterCompo | ||
| details={[ |
There was a problem hiding this comment.
For different reasons(please research), I would suggest make App.js file as light as possible.
What's the point of passing details as props to the component?
So how about if you move details to FooterCompo and then map on the array of details?
src/FooterCompo.js
Outdated
| <footer> | ||
| <ul> | ||
| {details.map((detail) => { | ||
| return <li key={detail}>{detail}</li>; |
There was a problem hiding this comment.
That's right, correctly passed key to each child. But, detail isn't always a unique key (imagine we have lots of details and it would be hard to see if each one is unique)
So how about using {details.map((detail, index) => { return <li key={index}>{detail}</li>
| placeholder="Customer name" | ||
| /> | ||
| <button className="btn btn-primary">Search</button> | ||
| <SearchButton /> | ||
| </div> | ||
| </form> |
There was a problem hiding this comment.
I think the search functionality is not working. You just need to define a handleSumbit in the parent component of Search component and implement filter functionality. Don't forget to use prevent.default() and then pass your handleSubmit to form tag
Would be good to do some study about submitting form in React
| import LancasterCastleImg from "./images/Lancaster Castle.jpeg"; | ||
| import LondonEyeImg from "./images/London Eye.jpeg"; | ||
|
|
||
| const TouristInfoCards = () => { |
There was a problem hiding this comment.
This is all ok. But, you can make it nicer ; )
Please create an array of objects. Each object would present each city and then map on your data to display them in return.
add space to kick off build
change back to retrigger error
Triggering search when submitting the form
Implementing the search functionality
Display a customer profile - step 1
Abubakar-Meigag
requested review from
moneyinthesky
and removed request for
moneyinthesky
|
Kudos, SonarCloud Quality Gate passed!
|
For review