search

FormidableLabs / spectacle

A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.
https://commerce.nearform.com/open-source/spectacle/
MIT License
9.7k stars 690 forks source link

[Bug] `Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.` #1312

Open mathieucaroff opened 6 months ago

mathieucaroff commented 6 months ago

When we want to use useSteps in a component inside a <p> element, we get the following console error:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

See it in this codesandbox's console: https://codesandbox.io/s/infallible-hertz-2yjsj3?file=/src/index.js

Current behavior: The placeholder element produced by useStep is a <div>, which cannot always be inserted in the DOM without triggering the validateDOMNesting error in the console.

Expected behavior: useSteps should not return a <div /> placeholder element since this triggers the aforementioned error. Instead, it could return a <span /> element, which would address this issue.

mathieucaroff commented 6 months ago

Note: it is possible to ignore console errors programmatically by inserting a piece of code similar to the one below somewhere in your project:

console.error = (function (consoleDotError) {
  return function (...args) {
    if (args[0] && args[0].includes("Warning: validateDOMNesting")) return
    consoleDotError.call(console, ...args)
  }
})(console.error)