To pass dynamic properties from parent to child components in TeleportHQ, you can follow these steps:
Steps to Pass Dynamic Properties
1. Define Prop in Child Component:
- In your child component, define the properties you want to receive from the parent in the `propDefinitions`. For example:
json
"propDefinitions": {
"authorName": {
"type": "string",
"defaultValue": "Default Name"
},
"authorImage": {
"type": "string"
}
}
2. Use Dynamic Nodes in Child Component:
- Inside the child component, use dynamic nodes to reference the props. For instance, to display the `authorName`, structure it like this:
json
"node": {
"type": "element",
"content": {
"elementType": "text",
"children": [
{
"type": "dynamic",
"content": {
"referenceType": "prop",
"id": "authorName"
}
}
]
}
}
3. Pass Props from Parent Component:
- In the parent component, when you include the child component, you can pass the dynamic properties through the `attrs` property. For example:
json
"node": {
"type": "element",
"content": {
"elementType": "ChildComponent",
"attrs": {
"authorName": {
"type": "dynamic",
"content": {
"referenceType": "prop",
"id": "dynamicAuthorName"
}
},
"authorImage": {
"type": "dynamic",
"content": {
"referenceType": "prop",
"id": "dynamicAuthorImage"
}
}
}
}
}
4. Use Dot Notation for Nested Properties:
- If you're passing nested properties, you can use dot notation in the `id` field. For example, if you have a nested object, you can reference it like this:
json
"id": "user.name"
5. Preview and Test:
- After setting up the props and passing them, preview your layout to ensure the child component correctly receives and displays the dynamic data from the parent.
By following these steps, you can effectively pass dynamic properties from parent to child components in TeleportHQ, allowing for a flexible and reusable component architecture that leverages dynamic data effectively[1][2][3].
Citations:[1] https://docs.teleporthq.io/uidl/structure.html
[2] https://docs.teleporthq.io/uidl/examples.html
[3] https://help.teleporthq.io/en/article/how-to-bind-dynamic-data-to-elements-1ojkk98/
[4] https://teleporthq.io/headless-cms-integration
[5] https://github.com/teleporthq