How to set the position of a component inside an array, in a parent component?

[jaymefosa]

I've been looking through the examples on R3F for the birds and block matrix and am close to setting the position of each element but can't quite figure out how to pass change the position of a 'prop' as opposed to a Object3d.

I think this must be a simple react thing but I am terribly new. Many thanks.

function Letters(){
  const ref = useRef()
  
  const count = 10
  const letters = Array(count).fill().map((_, i) =>
    <Text hAlign="center" position={[0,-4,-10 - (i*5)]} children="ABBA" /> )


  useFrame(({clock}) => {
    // letters.map((letter, index) => {
    //     //console.log(letter.props.position.x)
    //     letter.props.position[0] = Math.sin(clock.getElapsedTime()) * (.5 + index)
    //   })


    //ref.current.rotation.x = Math.sin(clock.getElapsedTime()) * .5

  })

  return (
    <group ref={ref}>
      {letters.map((letter, index) => (letter))}
    </group>

  )

}

The thing I'd like is to shift the control of the movement away from the child component (Text) and into the parent component, so that different groups of children can be moved together more easily.

[drcmda]

react is all about top down data or on directional flow. state > view, as in the view is a mere reflection of state. the parent must have the data, and it forwards that data to its children by props.

if you refer to the useFrame and you want to set position in there, then why not simply ref.current.children.forEach(child => ... ? letters is a collection of vdom elements, these are not threejs objects.

here's an example with group children in a useframe https://twitter.com/0xca0a/status/1328130549198811142

[jaymefosa]

Thanks much, I tried as you suggested and got the effect I was hoping for. Unfortunately the frame rate seems quite low. Would you mind taking a look to see if this is a no-no implementation?

https://codesandbox.io/s/wizardly-breeze-9x9sh

[drcmda]

no performance problem that i can see and nothing that sticks out. just a bunch of geometries rotating, no unnecessary re-render. runs 60fps.

the only thing is that your state model is funky. do not generate jsx in your state. your state keeps the data, that data is reflected in the view: https://codesandbox.io/s/elated-resonance-8j8s6?file=/src/App.js