London10 | Adrian Ilovan | cyf-hotel-react #589
Conversation
Lesson 1 Complete
AdrianIlovan
changed the title
| return( | ||
| <header className="App-header"> | ||
| <img alt="App-logo" className="App-logo" src="https://marketplace.canva.com/EAE8Xyb2xY8/1/0/1600w/canva-gold-exclusive-royal-luxury-hotel-logo-izeElzvImEY.jpg"></img> | ||
| <h1>CYF Hotel</h1></header> |
There was a problem hiding this comment.
It's a minor point, but just keep an eye on the formatting of your embedded html.
It would be good </header> was on a new line
| import React from "react"; | ||
|
|
||
|
|
||
| const SearchButton = () => { |
| @@ -0,0 +1,31 @@ | |||
| import React from "react"; | |||
|
|
|||
There was a problem hiding this comment.
This looks great. But it seems like there's some duplication here - the structure of each card is the same, and we are repeating that structure 3 times.
Using React, can you think of how you might be able to reduce that duplication? 😄
There was a problem hiding this comment.
Yes I think I can create a separate component "const Card" and pass all object info in there so I can add any other card with ease . thanks for letting me know :)
|
|
||
| const Footer = () => { | ||
|
|
||
| const myProps = ["123 Fake Street, London, E1 4UD", "[email protected]", "0123 456789"]; |
There was a problem hiding this comment.
It sounds like this data should be passed into the component using React props. You can have a look at how props normally work here: https://www.w3schools.com/react/react_props.asp
Can you think of how to update the code so the data is defined in the parent component, and is passed to the Footer component as a prop?
There was a problem hiding this comment.
I will make the updates , thanks :)
| import FakeBookings from "./data/fakeBookings.json"; | ||
| import moment from "moment/moment"; | ||
|
|
||
| const SearchResults = (props) => { |
There was a problem hiding this comment.
This looks great!
You did a good job of passing the props in and using them in the component 👍
| <td>{booking.roomId}</td> | ||
| <td>{booking.checkInDate}</td> | ||
| <td>{booking.checkOutDate}</td> | ||
| <td>{moment(booking.checkOutDate).diff(booking.checkInDate, "days")}</td> |
| const SearchResults = (props) => { | ||
| const [selectedRows, setSelectedRows] = useState([]); | ||
| const selectedClicks = (bookingId) => { | ||
| setSelectedRows((selectedClickedRows) => { |
|
Great work so far - good luck with the rest of the project 😄 |
|
Kudos, SonarCloud Quality Gate passed!
|
No description provided.