> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.knapsack.cloud/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server.

# Advanced Prop Configurations

## Overview

Welcome to the "Advanced Prop Configurations" section. Here, you'll delve into sophisticated techniques for applying advanced prop configurations within JSON Schema. This documentation will guide you through various advanced scenarios, helping you harness the full potential of prop configurations to build more dynamic and flexible components.

Whether you are dealing with complex data structures, custom components, or multiple prop types, these guides will provide you with the necessary knowledge and examples to master advanced prop handling.

**Tip:** you can use [this utility](https://rjsf-team.github.io/react-jsonschema-form/) to show detailed examples of the JSON Schema Spec.

### Editing the Prop Spec (JSON Schema)

For all of these advanced prop implementations you will need to edit the component's "Prop Spec" using valid [JSON Schema](https://json-schema.org/specification) format.

#### Steps to edit the "Prop Spec"

1. Navigate to the component for which you'd like to edit the Prop Spec.
2. To the right and above the Pattern Stage, click the "Edit Template" button.
3. From the fly-out on the right select the "Spec" tab.
4. Here click the "down arrow" on the prop for which you'd like to edit the Prop Spec.
5. Proceed into one of the below advanced techniques.

![Screenshot 2024-07-24 at 4.17.02 PM.png](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/knapsack-docs.docs.buildwithfern.com/76cacd42359126a55991f8317ee258879caf1d7734d8b82b5abf07d900b51be3/docs/assets/images/488195e6-screenshot-2024-07-24-at-41702-pm-vr2mjxm8h7png.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260724%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260724T211011Z&X-Amz-Expires=604800&X-Amz-Signature=8a878f25e08db7fb07afd0f0f1ae06d42577b988d9158da63fcf6bf91d9f0e07&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

#### [Using Arrays of Objects](/code-sources/advanced-prop-configurations/using-arrays-of-objects)

Learn how to configure and utilize arrays of objects within your components. This guide will cover scenarios where you need to handle lists of items, each with multiple attributes, ensuring your data is managed efficiently and effectively.

#### [Using Components as Props](/code-sources/advanced-prop-configurations/using-components-as-props)

Discover the power of using components as props to create more modular and reusable code. This section will show you how to pass entire components as props, enabling greater flexibility and customization in your applications.

#### [Using Functions as Props](/code-sources/advanced-prop-configurations/using-functions-as-props)

Explore the benefits of passing functions as props to enhance the interactivity and behavior of your components. This guide will provide examples and best practices for using callback functions and handlers within your prop configurations.

#### [Using Multiple Prop Types](/code-sources/advanced-prop-configurations/using-multiple-prop-types)

Understand how to configure props that can accept multiple types, increasing the versatility of your components. This section will cover the implementation and validation of props that can handle various data types, ensuring robust and adaptable components.

#### [Using Objects as Props](/code-sources/advanced-prop-configurations/using-objects-as-props)

Master the technique of passing objects as props to encapsulate related data and functionality. This guide will illustrate how to effectively use objects within your prop configurations to streamline your component interfaces and improve code organization.