it's been weeks since i started this fun project..

and i think it's about time i tidy up a bit.

so i have this function that renders 3d models into canvas

main.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>
  )

but then i create navbar and decided to migrate all the function there, with a simple minded thought i does it like this

Navbar.jsx

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

but this just wrong, and have tried modify const cChange to export function CChange() outside the main function and it still wont work. can you guys give me solution? thank you!