React Child component has undefined props.style

Question

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

Answer 1

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.

Answer 2

In case your component is not a Stateless Functional Component then you need to access the property by using this.props.style.

More on the component types here: https://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components-630fdfd90c9c