I'm quite new to React. I want to create custom component that has several custom component inside it. Below is the code
const { item, to, onClick, width, style, ...otherProps } = props;
const h = width ? (width*IMAGE_RATIO)+'px' : 'auto';
const w = width ? width+'px' : 'auto';
<StackView
style={{ width: w, ...style }}
{...otherProps}
>
<Container
to={to}
onClick={onClick}
item={item}
style={{ width: w, height: h }}
/>
<ClickableText
to={to}
onClick={onClick}
typography={typography.t15}
color={color.red}
activeColor={color.redDark}
style={{ lineHeight: '12px' }}
>
{item.title}
</ClickableText>
</StackView>
Inside the Container
component and ClickableText
component props.style
got undefined
tried to Google this problem but find nothing. Can somebody help me? thanks
EDIT:
Michael answer was spotted on. The problem is in my StackView
component, I override children style while cloning them
I'm sure there's something wrong with the parent of Container
and ClickableText
component.
Please check the parent component StackView
. If you override the children style, then that's the root problem of this mess.
Good Luck.