react-overlays: Unknown props when using Overlay
Using React 15.2.0 and react-overlays 0.6.4 results in the following Warning in the console while using the Overlay component.
warning.js?8a56:44 Warning: Unknown props `placement`, `arrowOffsetLeft`, `arrowOffsetTop`, `positionLeft`, `positionTop` on <div> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in div (created by Select)
in Position (created by Overlay)
in div (created by RootCloseWrapper)
in RootCloseWrapper (created by Overlay)
Some code that shows how i use the Overlay component so that it is clear that my code isn’t sending down wierd props.
<Overlay placement="bottom" show={open} rootClose container={this} onHide={this.handleHide} target={this.handleTarget}>
<div className={styles.menu}>
{children.map((child, index) => {
return React.cloneElement(child, {
active: selected == index,
onClick: this.handleSelect,
})
})}
</div>
</Overlay>
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Comments: 19 (7 by maintainers)
Ah ok. Well might want to update the docs to reflect that. On Wed, Jan 4, 2017 at 7:43 PM Jason Quense notifications@github.com wrote:
Any solution to this one yet?
Overlay injects positioning props into its child. That’s how Overlay does its thing. As such you’ll need to render a custom component there and only pass down known props to the div. There’s not really any way around this, since in the general case Overlay needs to communicate placement information to its child.