…as I said I was lost in a glass of water. Here’s how I solved the problem in the situation described above (maybe it could help to newby React guys like me, but maybe some experts could provide a better solution):
const ParentItem = ({ state, setState }) => {
return (
<PanelBody
title={__("Parent item", "textdomain")}
initialOpen={false}
>
<PanelRow>
<RadioControl
label={__("MyRadioControl", "textdomain")}
selected={ state ? state : "none" }
options={[
{
label: __("None", "textdomain"),
value: 'none'
},
{
label: __("Show custom 1", "textdomain"),
value: 'show-custom-1'
},
{
label: __("Show custom 2", "textdomain"),
value: 'show-custom-2'
},
{
label: __("Show custom 3", "textdomain"),
value: 'show-custom-3'
},
]}
onChange={setState}
/>
</PanelRow>
{state === "show-custom-1" &&
<PanelRow>
<MyCustom1 />
</PanelRow>
}
{state === "show-custom-2" &&
<PanelRow>
<MyCustom2 />
</PanelRow>
}
{state === "show-custom-3" &&
<PanelRow>
<MyCustom3 />
</PanelRow>
}
</PanelBody>
)}
export default compose([
withDispatch((dispatch, props) => {
return {
setState: function (value) {
dispatch('core/editor').editPost({ meta: { _mysite_my_radio_control: value } });
}
}
}),
withSelect((select, props) => {
return {
state: select('core/editor').getEditedPostAttribute('meta')['_mysite_my_radio_control'],
};
}),
])(ParentItem);