Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning validateDOMNesting in case toast message contains <div>

See original GitHub issue

Got warning in Chrome: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. with material-ui’s <Alert> inside toast message (or any other div)

Possible solution: replace 'p' with 'div' https://github.com/timolins/react-hot-toast/blob/9045f1ca73f7ec5301dc5a7bbea4a19f106384c0/src/components/toast-bar.tsx#L39

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:8 (3 by maintainers)

Top GitHub Comments

2reactions

timolinscommented, Dec 21, 2020

@albannurkollari Not sure if I got that correctly, but I think by replacing @ambroseus was referring to using div by default instead of p. This shouldn’t have too many drawbacks other than being a bit less semantic. The error itself wasn’t thrown by react-hot-toast, but by React itself because it renders incorrect HTML (nesting a div inside a p tag).

That said I agree that it should be possible to render a custom component, without having to go headless. Not sure yet what’s the best API here since there are two components (ToastBar + Message) that need to be replaced. Maybe a disableStyles option would do the trick as well.

1reaction

timolinscommented, Dec 24, 2020

I’ll open a new issue regarding the message customisation.