# Unnecessary div elements are rendered using the Bloomreach React SDK **URL:** \ **Category:** Content SaaS\ **Created:** [January 11, 2024, 10:51am UTC](https://community.bloomreach.com/t/unnecessary-div-elements-are-rendered-using-the-bloomreach-react-sdk/4241 "2024-01-11T10:51:10Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![petervmeijgaard](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/petervmeijgaard/32/1369_2.png) [@petervmeijgaard](https://community.bloomreach.com/u/petervmeijgaard)\ **Post date:** [January 11, 2024, 10:51am UTC](https://community.bloomreach.com/t/unnecessary-div-elements-are-rendered-using-the-bloomreach-react-sdk/4241/1 "2024-01-11T10:51:10Z")
Hi Bloomreacher! We’ve been using the Bloomreach React SDK in our codebase for a while now and noticed that many redundant `div` elements are rendered, preventing us from styling our components correctly. After some investigation, I found that the `BrContainerBox` is responsible for adding these divs. The code can be found here: > Attached is a screenshot to show the added `div` elements on the page: ![Screenshot 2024-01-11 at 11.47.51](https://canada1.discourse-cdn.com/flex027/uploads/bloomreach1/original/2X/3/330e32eface8d4a6ab50203d8ec30bd25121a9ae.jpeg) Is it possible to only render the divs in the experience manager and use a `React.Fragment` for the “production” site? Or can we override the default behavior of `BrContainerBox` with a property or some sort of Bloomreach configuration? I’m looking forward to your reply! With kind regards, Peter van Meijgaard Lead Frontend Developer @ ANWB ---
**Author:** ![Adam\_Pengh](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/adam_pengh/32/988_2.png) [@Adam\_Pengh](https://community.bloomreach.com/u/Adam_Pengh)\ **Post date:** [January 11, 2024, 12:28pm UTC](https://community.bloomreach.com/t/unnecessary-div-elements-are-rendered-using-the-bloomreach-react-sdk/4241/2 "2024-01-11T12:28:19Z")
Hi @petervmeijgaard, The way the container gets rendered is determined by `xtype` property on the channel editor component. > **[Channel Editor Containers - Bloomreach Experience Manager (PaaS/Self-Hosted)...](https://xmdocumentation.bloomreach.com/library/concepts/template-composer/channel-editor-containers.html)** > > The fast and flexible on-premise or PaaS headless CMS Based on the `xtype` value, the React SDK will determine how to render the container. For example, setting `xtype=hst.nomarkup` will render a fragment with only the child components. ```auto export function BrContainerNoMarkup({ children }: React.PropsWithChildren): JSX.Element { return <>{children}; } ``` > ---
**Author:** ![Ineke](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/ineke/32/1401_2.png) [@Ineke](https://community.bloomreach.com/u/Ineke)\ **Post date:** [January 12, 2024, 9:20am UTC](https://community.bloomreach.com/t/unnecessary-div-elements-are-rendered-using-the-bloomreach-react-sdk/4241/3 "2024-01-12T09:20:54Z")
Indeed, changing the xtype of the container to nomarkup would solve the issue. Then you would have to change that through the cms console though, which can be a lot of work if you already have a lot of config in production. If you also want the hst.vbox container type to not render extra divs and you are sure you will never need it to render extra divs, you can change the mapping of the container type, the same way you map you own components: ```auto [TYPE_CONTAINER_BOX]: CustomContainerBox, ``` then in the CustomContainerBox component you can copy the BrContainerNoMarkup code like in the example mentioned by Adam: [spa-sdk/packages/react-sdk/src/cms/BrContainerNoMarkup.tsx at main · bloomreach/spa-sdk · GitHub](https://github.com/bloomreach/spa-sdk/blob/main/packages/react-sdk/src/cms/BrContainerNoMarkup.tsx) Also see the documentation here: [spa-sdk/packages/react-sdk/README.md at main · bloomreach/spa-sdk · GitHub](https://github.com/bloomreach/spa-sdk/blob/main/packages/react-sdk/README.md#mapping) ---
**Author:** ![petervmeijgaard](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/petervmeijgaard/32/1369_2.png) [@petervmeijgaard](https://community.bloomreach.com/u/petervmeijgaard)\ **Post date:** [January 12, 2024, 10:33am UTC](https://community.bloomreach.com/t/unnecessary-div-elements-are-rendered-using-the-bloomreach-react-sdk/4241/4 "2024-01-12T10:33:02Z")
Thanks a lot for the quick support! I’ve asked our Bloomreach developers and we’re going to see if switching to `xtype=hst.nomarkup` is indeed a workable solution for us. Another question though. In the documentation I read that by switching to `hst.nomarkup`, it’s now necessary to include a custom element in the container component (`<@hst.include ref="nomarkup-container"/>`) and an extra CSS class for container items (`nomarkup-container-item-root`). > **[Channel Editor Containers - Bloomreach Experience Manager (PaaS/Self-Hosted)...](https://xmdocumentation.bloomreach.com/library/concepts/template-composer/channel-editor-containers.html#using-the-nomarkup-type)** > > The fast and flexible on-premise or PaaS headless CMS Is still needed for the components being rendered by the React SDK and the `BrManageContentButton` is being used? I looked at the documentation about this functionality, but couldn’t find it anywhere and it seems that no extra HTML elements are added to the code of the example projects using the React Bloomreach SDK. Thanks! ---
**Author:** ![Ineke](https://yyz1.discourse-cdn.com/flex027/user_avatar/community.bloomreach.com/ineke/32/1401_2.png) [@Ineke](https://community.bloomreach.com/u/Ineke)\ **Post date:** [January 12, 2024, 1:28pm UTC](https://community.bloomreach.com/t/unnecessary-div-elements-are-rendered-using-the-bloomreach-react-sdk/4241/5 "2024-01-12T13:28:22Z")
I’m not a part of the Bloomreach team or anything, but I’ve ran into this issue myself before so thought I would help 😉 But I’m pretty sure you don’t need to add these extra elements if you’re using the React Sdk, we also use the nomarkup containers and we didn’t have to add these elements.