Han pasado semanas desde que comencé este divertido proyecto..

y creo que ya es hora de ordenar un poco.

así que tengo esta función que convierte los modelos 3D en lienzos

principal.jsx

 const [clothesCurrent, clothesModel] = useState("cModel1"); const cModels = { cModel1: <C1 />, cModel2: <C2 />, } const CChange1 = () => { clothesModel("cModel1"); } const CChange2 = () => { clothesModel("cModel2"); } return( <div> <h3>Change Clothes</h3> <button onClick={CChange1}>Clothes1</button> <button onClick={CChange2}>Clothes2</button> <Canvas> <Suspense> {cModels[clothesCurrent]} </Suspense> </Canvas> </div> )

pero luego creé la barra de navegación y decidí migrar todas las funciones allí, con un pensamiento simple, lo hago así

Navbar.jsx

 <DropdownItem leftIcon={<BoltIcon />} onClick={<CChange1 />}>Hair 1</DropdownItem> <DropdownItem leftIcon={<BoltIcon />} onClick={<CChange2 />}>Hair 2</DropdownItem>

pero esto simplemente está mal, y he intentado modificar const cChange para export function CChange() fuera de la función principal y aún no funciona. me pueden dar solucion? ¡gracias!