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.
- 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.
- 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.