# React multi scene , scene with multiple components

**URL:** <https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730>\
**Category:** Technical Support\
**Tags:** cloud-editor\
**Created:** [March 14, 2024, 1:46pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730 "2024-03-14T13:46:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bill\_Sullivan](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@Bill\_Sullivan](https://forum.8thwall.com/u/Bill_Sullivan)\
**Post date:** [March 14, 2024, 1:46pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/1 "2024-03-14T13:46:55Z")

</div>

I’m creating a project using the muti scene react method of changing from scene to scene without reloading the page.

I have added a new scene but I’d like to attach two components, but when I try it doesn’t work.

I tried as an array

components={[recenterButtonComponents, treeComponents]}

Didn’t work

I tried just separating them with comma, didn’t work.  
components={recenterButtonComponents, treeComponents}

I tried adding a second line repeating components  
components={recenterButtonComponents}  
components={treeComponents}

Here is what my code looks like, I’d like to add multiple components within this statement.

\<AFrameScene  
sceneHtml={require(‘./tree.html’)}  
components={recenterButtonComponents}  
/\>

---

<div class="post-metadata">

**Author:** ![rama\_rambudiarto](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/rama_rambudiarto/32/1675_2.png) [@rama\_rambudiarto](https://forum.8thwall.com/u/rama_rambudiarto)\
**Post date:** [March 14, 2024, 2:04pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/2 "2024-03-14T14:04:14Z")

</div>

you must use if you want change the the scene or create button to direct to other page

---

<div class="post-metadata">

**Author:** ![Bill\_Sullivan](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@Bill\_Sullivan](https://forum.8thwall.com/u/Bill_Sullivan)\
**Post date:** [March 14, 2024, 2:18pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/3 "2024-03-14T14:18:30Z")

</div>

Hi Rama,

I understand I have to use REACT, but my question is how can I add multiple components (the example they give in the tutorial only has one component defined, I would like to add more, but when I add a second component using a comma it doesn’t work.

In my example below I have “recenterButtonComponents” I would like to add a second component called “treeComponents”

---

<div class="post-metadata">

**Author:** ![rama\_rambudiarto](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/rama_rambudiarto/32/1675_2.png) [@rama\_rambudiarto](https://forum.8thwall.com/u/rama_rambudiarto)\
**Post date:** [March 14, 2024, 2:35pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/4 "2024-03-14T14:35:19Z")

</div>

components={[  
{name:‘example’, val:recenterbuttonComponents},  
{name:‘example’, val:treeComponents},  
]}

---

<div class="post-metadata">

**Author:** ![Bill\_Sullivan](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@Bill\_Sullivan](https://forum.8thwall.com/u/Bill_Sullivan)\
**Post date:** [March 14, 2024, 2:43pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/5 "2024-03-14T14:43:17Z")

</div>

Thanks Rama,

I’m still just getting my head around doing things the original way and migrating it over to use the React scene switching… Nothing like learning on top of learning eh!!

Thanks again.

---

<div class="post-metadata">

**Author:** ![rama\_rambudiarto](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/rama_rambudiarto/32/1675_2.png) [@rama\_rambudiarto](https://forum.8thwall.com/u/rama_rambudiarto)\
**Post date:** [March 14, 2024, 3:12pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/6 "2024-03-14T15:12:53Z")

</div>

yess you can use repo on 8thwall github react scene.  
so this will be help you, and dont forget learn typescript too for good script haha

---

<div class="post-metadata">

**Author:** ![Bill\_Sullivan](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@Bill\_Sullivan](https://forum.8thwall.com/u/Bill_Sullivan)\
**Post date:** [March 14, 2024, 4:50pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/7 "2024-03-14T16:50:22Z")

</div>

BAAAAA I wish I had time for learning another language… maybe once i get this project out the door I’ll look more into it.

Spending a lot of time learning intricacies of exporting blender objects and animations as useful glb files, baking keyframes and textures, learning how to export mesh deformations and materials as well.

It’s starting to take shape and it’s looking great so far, can’t wait for more of this to be baked into my subconscious so I can do more playing then learning.

---

<div class="post-metadata">

**Author:** ![Bill\_Sullivan](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@Bill\_Sullivan](https://forum.8thwall.com/u/Bill_Sullivan)\
**Post date:** [March 15, 2024, 1:32pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/8 "2024-03-15T13:32:36Z")

</div>

Hey Ram, thanks for the code, but when I implement it I don’t get any errors but those components don’t seem to get passed, as my recenter disappears where it was working with just components={recenterButtonComponents}

but once I switched to your method of including multiple components it doesn’t crash but I don’t see my recenter button so I’m not sure what I have wrong…

components={[

{name:‘recenter’, val:recenterButtonComponents},

{name:‘hotspot’, val:tapHotspotComponents},

{name:‘closehotspot’, val:tapCloseComponents},

]}

---

<div class="post-metadata">

**Author:** ![rama\_rambudiarto](https://sea1.discourse-cdn.com/flex019/user_avatar/forum.8thwall.com/rama_rambudiarto/32/1675_2.png) [@rama\_rambudiarto](https://forum.8thwall.com/u/rama_rambudiarto)\
**Post date:** [March 15, 2024, 2:18pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/9 "2024-03-15T14:18:33Z")

</div>

can you share the full code?

---

<div class="post-metadata">

**Author:** ![Bill\_Sullivan](https://avatars.discourse-cdn.com/v4/letter/b/a87d85/32.png) [@Bill\_Sullivan](https://forum.8thwall.com/u/Bill_Sullivan)\
**Post date:** [March 15, 2024, 2:29pm UTC](https://forum.8thwall.com/t/react-multi-scene-scene-with-multiple-components/730/10 "2024-03-15T14:29:37Z")

</div>

import {AFrameScene} from ‘…/lib/aframe-components’  
import {FloatingBackButton} from ‘…/lib/material-ui-components’  
import {TreeSceneComponents} from ‘…/components/tree-components’

import {recenterButtonComponents} from ‘…/components/recenter’

import {tapHotspotComponents} from ‘…/components/tap-hotspot’  
import {tapCloseComponents} from ‘…/components/tap-close’

declare let React: any  
declare let ReactRouterDOM: any

const {withRouter} = ReactRouterDOM

const SphereScene = withRouter(({match}) =\> (  
\<React.Fragment\>  
  
\<AFrameScene  
sceneHtml={require(‘./kiosk\_sphere.html’)}  
components={recenterButtonComponents}  
/\>  
\</React.Fragment\>  
))

export {SphereScene}

\*\*when I replace the components line with what you sent it doesn’t work…