Doesn't seem to work with React.cloneElement()

[paulincai]

It is a common and simple practice to use top component data container and pass props to a couple of mobile pages via React.cloneElement(). Example:

{this.props.children ? React.cloneElement(this.props.children, {...this.props}) : }

In this case, before even adding transition classes and ids to top DIVs in the children, things on the screen are looking scrambled, like content is getting doubled on the vertical.

[trungdq88]

Can you provide a code snippet to reproduce the problem?

[nontachaiwebdev]

I think.Now i got this problem too maybe it happen because React.cloneElement().Now am try to fixed and wait for solution from @trungdq88

thankyou

[trungdq88]

Close due to inactive.

[theasia-Ashish]

Its not working with React.cloneElement and also throwing some weird error for graphql wrapped component.

[trungdq88]

@theasia-Ashish if you are wrapping the component with graphql, please do one of the following to get <PageTransition> to work:

• Specify { withRef: true } in the connect method.
• or
• Wrap your graphql wrapped component with a parent component so that <PageTransition> can access to the DOM of your component and make transition logic on that.

[theasia-Ashish]

@trungdq88 I tried both nothing is working if i apply React.cloneElement on this.props.children. its double the content of the page and add/remove classes continuously.

[trungdq88]

@theasia-Ashish Have you find a way to fix it yet?