I have used text block from builder basics. By default it renderes tag. But when i update dynamic text it takes
tag by default. This is causing hydration error in react/next app.
Is there any way to remove span tag globally?
I have used text block from builder basics. By default it renderes tag. But when i update dynamic text it takes
tag by default. This is causing hydration error in react/next app.
Is there any way to remove span tag globally?
Hi @Bindiya!
If you could please share a screenshot or a loom to reproduce this error, will be much appreciated. Also, you may find help at our forum post
Self-closing tags in custom code trigger hydration error in React SDK
Hey Manish,
We have shared details as part of request (3286) in support ticket.
Have attached a screenshot to highlight inappropriate html tag placement.
Builder space link : https://builder.io/content/1ce1962a070747a48bf794d0e544860e
Hi Bindiya!
Currently, there is no feature available within the builder to remove the <span>
tag from the Text box input. But you can submit a feature request at Builder.io Ideas.
Now, as a solution, you can definitely use a Custom code block instead of Text Box input. Or you can use javascript to replace the span tag with a div or any other appropriate HTML tag. E.g.
const allSpanElements = document.querySelectorAll('span.builder-text');
allSpanElements.forEach((spanElement) => {
// Here comes the Code that should be executed on every Builder Span Element, e.g.
var divElement = document.createElement("div");
divElement.innerHTML = spanElement.innerHTML
spanElement.parentNode.replaceChild(divElement, spanElement);
});
Let us know if you have any further questions or concerns. Thank you!