Ansel Ansel - 1 month ago 20
React JSX Question

React Child component has undefined props.style

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

Answer

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.