React List and ListItem Components

Lists are a common component to add to a react app. Often, there will be a title and image associated with each list item on a page. On clicking the list item, the user is presented with more detailed information about the item, including a description and other relevant details. The components that come with this package are described allow the user to easily enact this functionality in a react app.

Entering your list items and details

• Add a large and small image for each list item to the assets folder.
• Navigate to the data folder which contains the listData file and adjust the image import statements to match the images you uploaded to the assets folder.
• Edit the list objects with relevant information.
• Add additional list items to the listData array, following the pattern for the sample list items.

List component

• The List component will display when the user navigates to the homepage of your app. It will display all items in a grid. The grid is responsive to all screen widths.

ListItem component

• The associated ListItem component will display when a user clicks on any item in the List component. The user will be redirected to this detail page which will display the associated details for the list item selected.