Introduction
We will learn about the versatile `Item` component that can render various content types, including text, icon, state-based icon, or an image along with text. This component accepts a string or an object as a value and an optional `mapping` prop for field mapping.
Basic Usage
To render different types of content, pass various data structures to the `value` prop:
Rendering Different Content Types:
Simple Text
Icon and Text
Image and Text
Note that the component only renders the icon, image & text, but does not put a wrapper element around it. In the preview, we have used an item tag to wrap the `Item` component.
State-based Icons
To render text with a state-based icon, pass an object that includes the text, icon, and state fields:
State-based Icon Implementation:
The icon will automatically switch based on the state value, choosing between the 'open' and 'close' icons.
Field Mapping
The Item component allows you to provide field mappings using the `fields` prop. These mappings enable you to customize the attributes it uses to the content from the provided value.
Field Mapping Example:
The flexibility of field mapping and the ability to render various combinations of text, icons, and images make this component the default item renderer for many of the data-driven components.
Properties
Core Properties
- value: String or object with content data (required)
- fields: Field mapping object for custom data structures
- class: Custom CSS classes
Supported Fields
- text: Display text
- icon: Icon name or state-based icon object
- image: Image URL
- state: State for conditional icons
Flexible Data Structures
The Item component is designed to work with any data structure through field mapping, making it perfect for use in data-driven components like Lists, Menus, and more.
Continue learning
The Item component is commonly used within data-driven components. Explore how it integrates with other components.