# Accordian is not rendering as expected in reactjs

**URL:** <https://forum.builder.io/t/accordian-is-not-rendering-as-expected-in-reactjs/2110>\
**Category:** Technical Questions\
**Tags:** visual-editor, accordion, react\
**Created:** [May 5, 2022, 9:44am UTC](https://forum.builder.io/t/accordian-is-not-rendering-as-expected-in-reactjs/2110 "2022-05-05T09:44:04Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TestMail](https://avatars.discourse-cdn.com/v4/letter/t/54ee81/32.png) [@TestMail](https://forum.builder.io/u/TestMail)\
**Post date:** [May 5, 2022, 9:44am UTC](https://forum.builder.io/t/accordian-is-not-rendering-as-expected-in-reactjs/2110/1 "2022-05-05T09:44:04Z")

</div>

_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.io: Drag and drop page builder and CMS](https://builder.io/content/e783ff934eb14318aef125431506a1ad)**
>
> Build and optimize digital experiences for any tech stack, visually.

**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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6eeabae65e1203481bb74ec6db258ed308fbaacc.png)  
 ![codebase](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b94b3e02f25152c3fb0e2998b2d116363de270cd.png)  
 ![faq-thumbnail](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/dbed24b6a12d7ad325a8c147d24aa27db52df38c.jpeg)

**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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/6/6eeabae65e1203481bb74ec6db258ed308fbaacc.png)

---

<div class="post-metadata">

**Author:** ![logan](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/logan/32/5564_2.png) [@logan](https://forum.builder.io/u/logan)\
**Post date:** [May 5, 2022, 12:16pm UTC](https://forum.builder.io/t/accordian-is-not-rendering-as-expected-in-reactjs/2110/2 "2022-05-05T12:16:30Z")

</div>

Hi @TestMail and welcome to the [Builder.io](http://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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e65f3b1f908b3cdad5b18889f6c909f02f491203.png)

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

Thanks!  
Logan from [Builder.io](http://Builder.io) Account Support

---

<div class="post-metadata">

**Author:** ![TestMail](https://avatars.discourse-cdn.com/v4/letter/t/54ee81/32.png) [@TestMail](https://forum.builder.io/u/TestMail)\
**Post date:** [May 5, 2022, 1:12pm UTC](https://forum.builder.io/t/accordian-is-not-rendering-as-expected-in-reactjs/2110/3 "2022-05-05T13:12:21Z")

</div>

I have created sandbox, please go through this once

> **[vigilant-feather-7wznpr - CodeSandbox](https://codesandbox.io/s/vigilant-feather-7wznpr?file=%2Fsrc%2FApp.js)**
>
> vigilant-feather-7wznpr by testtestmail25 using @builder.io/react, components, react, react-dom, react-router-dom, react-scripts

You can find the issue in /faq-figma page  
please navigate to specified url in sandbox  
ref- [React App](https://7wznpr.csb.app/faq-figma)

---

<div class="post-metadata">

**Author:** ![armando](https://avatars.discourse-cdn.com/v4/letter/a/a5b964/32.png) [@armando](https://forum.builder.io/u/armando)\
**Post date:** [May 5, 2022, 2:21pm UTC](https://forum.builder.io/t/accordian-is-not-rendering-as-expected-in-reactjs/2110/4 "2022-05-05T14:21:31Z")

</div>

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

```auto
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.

---

<div class="post-metadata">

**Author:** ![TestMail](https://avatars.discourse-cdn.com/v4/letter/t/54ee81/32.png) [@TestMail](https://forum.builder.io/u/TestMail)\
**Post date:** [May 6, 2022, 5:14am UTC](https://forum.builder.io/t/accordian-is-not-rendering-as-expected-in-reactjs/2110/5 "2022-05-06T05:14:02Z")

</div>

Thanks @armando , It’s working now 😃