Accordian is not rendering as expected in reactjs

Technical Questions
, ,
1

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
e783ff934eb14318aef125431506a1ad

Builder public api key
ccd39cdffef54894b73e153d658f42eb

What are you trying to accomplish
I want to integrate builder on a FAQ page

Screenshots or video link

FAQ-FIGMA
FAQ-FIGMA1366×581 23.2 KB

codebase
faq-thumbnail
faq-thumbnail1200×1274 56.7 KB

Code stack you are integrating Builder with
React

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

import React from ‘react’
import { BuilderComponent } from ‘@builder.io/react’
import ErrorPage from ‘components/ErrorPage’
import Loader from ‘components/LoadingSpinner’

class CatchallPage extends React.Component {
state = { notFound: false };

render() {
  return !this.state.notFound ? (
    <BuilderComponent
      apiKey="API KEY"
      model="page"
      contentLoaded={content => {
        if (!content) {
          this.setState({ notFound: true });
        }
      }}
    >
      <Loader />
    </BuilderComponent>
  ) : (
    <ErrorPage /> // Your 404 content
  );
}

}

export default CatchallPage

FAQ-FIGMA
FAQ-FIGMA1366×581 23.2 KB

2

Hi @TestMail and welcome to the Builder.io forum!

I checked out your project content link and I am seeing the Accordion element rendering correctly on my end! Here is a look:

image
image1461×1193 91.4 KB

Can you describe what you are seeing or record a Loom of this in action?

Thanks!
Logan from Builder.io Account Support

3

I have created sandbox, please go through this once

You can find the issue in /faq-figma page
please navigate to specified url in sandbox
ref- React App

4

@TestMail if you open the console in that sandbox, you will see the problem and the suggestion:

Missing @[builder.io/widgets](http://builder.io/widgets) installation,
please install and import @[builder.io/widgets](http://builder.io/widgets)
to use Accordion in your content, more info here:
https://github.com/BuilderIO/builder/tree/main/packages/widgets

These widgets are not part of Builder by default, since lots of users don’t need them or will provide their own implementation of them.

1 Like
5

Thanks @armando , It’s working now :smiley: