ToastContents: "Warning: Unknown props `store`, `intl`, `router`, `history` on <div> tag."

Maybe I’m not using the Toast component correctly, but this warning always comes up when the Toast is render. Basically, I have a boolean in my state that tells to render or not the toast inside de App component.

let toast = null;
if(displayToast){
    toast = (<Toast status={status} onClose={onClose}>{message} </Toast>)
}

<BrowserRouter>
    <App centered={false} inline >
         {toast}
         <Switch>
             <Route exact path="/">
                 <Redirect to={PATHS.home} />
             </Route>
             <Route path={PATHS.home} component={HomePage}/>
          </Switch>
           .....
     </App>
</BrowserRouter>

Expected Behavior

The Toast renders without warning.

Actual Behavior

The parent component throws a warning.

URL, screen shot, or Codepen exhibiting the issue

Link in the warning: https://facebook.github.io/react/warnings/unknown-prop.html

Your Environment

• Grommet version: 1.6.0
• Browser Name and version: Chrome

[jstlaurent]

@alansouzati : If I’m reading the code right, the Toast component is explicitly extracting these four elements (history, intl, router and store) from the context and passing them as props to the ToastContents sub-component, which in turn now passes them on the div component (which can’t handle them).

Per the comments, that’s a way to carry along the rendering context into the layer. But these four elements should be removed from props and transformed back into a rendering context in ToastContents before the rest of the props can be passed down to the div.

That they are not is the origin of the problem. I’m not sure HOC wrappers are the issue here, since we’re not using any.

[jstlaurent]

@alansouzati : Thank you!