Make child props accessible from a parent component

[achilles_gerokostopoulos]

Hi,
I’m working on an Accordion/Collapse type component. The Accordion component contains an instance of a Header component.
The logic for two separate components is that only the header is clickable (behaves as button to control accordion open/close states) and requires separate hover states to main accordion component.

Question:

For the purposes of this query there are 2 things I’d like to control:

• The visibility or not of an icon preceding the Title
• The title text

I’ve tried defining these as props on the header component but:

• Can’t find a wait to “hoist” them to the parent accordion component so that they are configurable from there
• When the values are set for one instance of the component, for some reason all instances update with the same props.

See here:

Project link here:
https://studio.plasmic.app/projects/4Rh7LrkoVBa6hJQg7HtFC8

Thanks in advance,

Achilles

[sarah_ahmed]

Hello @achilles_gerokostopoulos

1. For hoisting of props, have you tried the “Allow External Access” option in the prop control’s context menu?
   

   

2. The second issue should be fixed after you fix the hoisting issue explained in #1

[achilles_gerokostopoulos]

Thanks Sarah, that did solve it!

Cheers,

Achilles

[achilles_gerokostopoulos]

Hi @sarah_ahmed ,

Having a related issue with this component.
I’m trying to make the svg icon configurable as well but can’t seem to find a way to create a prop for that.
I tried using a slot, but that doesn’t work when embedding into other components (no hoisting for slots it seems).

Cheers,

Achilles

[sarah_ahmed]

To hoist slots, you can use the “Convert to Slot target” option in the context menu of the content to be hoisted.