Home App Docs Blog Github

Accordions Not Rendering In React


I want to get the accordion block to render in my react app. It renders in the preview, however when I try to load the accordion on any of my models, it just doesn’t load.

You can see here that it has rendered: Screenshot - 819e8491c9cd232ddaed3abfef6e2747 - Gyazo
You can see here on my localhost that it hasn’t: Screenshot - 646e4e9fd30aa66f7bf2335e7acbac8f - Gyazo

I published the content multiple times to make sure, and reloaded the page of course. For some reason the accordions don’t seem to render on react apps. I was wondering if getting an accordion to render requires hydrate() possibly?

This is happening in React. This doesn’t seem to be a common issue so maybe it’s something on my end?

To add those widgets ( carousels, tabs, accordion, and masonry ) to your react app with builder.io you’d want to install @builder.io/widgets in your app.

npm install @builder.io/widgets

And import it on your page where you use BuilderComponent

import '@builder.io/widgets';

Thank you aziz, I managed to figure that out based on your post from last December as well!

1 Like