React Components Part 2

In this tutorial, we will continue modifying the menu component from the previous exercise. Instead of a list, we will use a Card component from reactstrap to display the menu in a different way. Also we will use the Card component to display the details of a selected dish. At the end of this tutorial, you will be able to:

• Make use of the Card component to display a list of items.
• Use the Card component to display detailed information.

Tutorial Resources

• dishes.js

Updating the Menu Component

• Open MenuComponent.js and update its contents as follows. Note that we have removed the dishes variable from the state of the component, and updated it to use the Card:

• Add a folder named shared under the src folder.

• In the shared folder, create a new file named dishes.js and add the following content to it (Note: Alternately you can download the dishes.js file given above in the Exercise Resources and move it to the shared folder. Make sure the file is named dishes.js):

• Open App.js and update it as follows:

(source: Front-End Web Development with React on Coursera)