20. Display a customer profile - iteration 1
Instructions:
Ccreate a new <CustomerProfile /> component. This component should be rendered next to the table in the <SearchResults /> component. This component should receive one prop id.
Add a new column in the table of the <SearchResults /> component and display a <button> for each row.
The text of the button should read "Show profile"
When clicking on a "Show profile" button for a given row, the component <CustomerProfile /> should display the text "Customer Profile", where is the id of the selected customer. Initially, the <CustomerProfile /> component doesn't show anything.
Hint: You need to record the selected customer id after clicking on a "Show profile" button. In which component do you think this state should be defined?
Test:
When first showing the page, no customer profile is displayed. When clicking the first "Show profile" button of the table, the text "Customer 1 profile" appears. When clicking the second "Show profile" button of the table, the text "Customer 2 profile" appears instead.
20. Display a customer profile - iteration 1
Instructions:
Ccreate a new
<CustomerProfile />component. This component should be rendered next to the table in the<SearchResults />component. This component should receive one propid.Add a new column in the table of the
<SearchResults />component and display a<button>for each row.The text of the button should read "Show profile"
When clicking on a "Show profile" button for a given row, the component
<CustomerProfile />should display the text "Customer Profile", where is the id of the selected customer. Initially, the<CustomerProfile />component doesn't show anything.Hint: You need to record the selected customer id after clicking on a "Show profile" button. In which component do you think this state should be defined?
Test:
When first showing the page, no customer profile is displayed. When clicking the first "Show profile" button of the table, the text "Customer 1 profile" appears. When clicking the second "Show profile" button of the table, the text "Customer 2 profile" appears instead.