Accessing React component children props from the parent

Question

I am currently in the process of designing the interface for a game engine that is written in JavaScript and ReactJS.

If a game object has a texture, the source of t

Answer 1

Is this the sort of thing you are thinking?

const Game = ({
  children
}) => {
  // small hack to turn single child, into array
  if (!children.length) {
    children = [children];
  }

  children.map((child, i) => {
    // now have access to props.source in parent
    console.log(child.props.source);
  })

  return ( < div > {
    children
  } < /div>
  );  
}

const Texture = ({source}) => {
  return (
    
Texture: {source}
 );
}

ReactDOM.render(( < Game >
      < Texture source = "thing.png" / >
      < Texture source = "other.png" / >
      < /Game>
), document.getElementById('game'));

It's a little messy really.

I would personally either give Game an array of textures to load itself.

Or decouple Game and Texture entirely, so data flows only one way.