how to correctly pass props across components in react?

April 15, 2024

I am trying to get leva debugger to give my cube a scale property, but When I pass the scale property the cube just disapears with no error. I’ve run it through chat GPT with no luck and cant seem to find out why it doesnt work as there is no error message.

Here is my Cube component:

export default function Cube(scale) {
    return <>
        <mesh receiveShadow  position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ scale }>
            <boxGeometry />
            <meshStandardMaterial color="greenyellow" />
        </mesh>
    </>
}

Here is my Experience component:

import { OrbitControls } from '@react-three/drei'
import { Perf } from 'r3f-perf'
import Cube from './scene_elements/cube'
import GrassPlane from './scene_elements/GrassPlane'
import { useControls } from 'leva'

export default function Experience()
{

    const {scale} = useControls({
        scale: 1
    })
    console.log(scale);
    return <>

        <Perf position="top-left" />

        <OrbitControls makeDefault />

        <directionalLight castShadow position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
        <ambientLight intensity={ 1.5 } />

        <Cube scale={scale}/>

        <GrassPlane/>

    </>
}