text: Q:
  
  react - passing in a raw js array as a prop, but jsx is modifying it into a js object
  
  Passing in a raw array as a prop, but it seems to be modified by React / jsx into a json object that has keys called "0", "1", etc, corresponding to the array elements.  This makes it impossible to be able to tell if the prop is actually an array or a single component.
  For example, 
  MyComponent has:
     propTypes: {
        attachedComponents: React.PropTypes.oneOfType([React.PropTypes.array, React.PropTypes.object])
     }
  
  Instantiate MyComponent and pass in an array:
     var foo = <Foo />  // my custom component 1
     var bar = <Bar />  // my custom component 2
     <MyComponent attachedComponents={[foo, bar]} />
  
  The problem, is that inside MyComponent, this.props.attachedComponents is not a real JS array -- it is some kind of JS Object that has keys "0", "1", each corresponding to the array element passed in.
  This nmakes it impossible for me to programatically determine if it was a single component that was passed in, or if it was an actual array, without doing some really bad kludging:
  MyComponent:
     getInitialState: function() {
          // this cannot work as intended, because the array passed in is converted into a js object whose typeof is object, not array:
          if (typeof this.props.attachedComponents !== 'array') {
              // do code for single component situation
          }
      }
  
  I cannot check on Object.keys(this.props.attachedComponents).length, since, for a single component passed in, Object.keys(this.props.attachedComponents) looks like this:
  ["$$typeof", "type", "key", "ref", "props", "_owner"]
  
  Now, if you are wondering why I am passing in arrays of components, it is because I want to have programmatic addition of components; I have seen this.props.children, but this does not seem reliable at all:
  
  Facebook says that this.props.children is opaque, and you must use
    React.Children api calls, all of which are getters, which seems to
    imply that this.props.children should not be mutated.
  
  Any ideas on how to detect if this.props.attachedComponents is an array, without doing some really bad kludging?
  Thanks
  
  A:
  
  JSX doesn't do anything to props.
  It's literally just syntactic sugar for calling React.createElement. Your code gets converted to:
  var foo = React.createElement(Foo, null); // my custom component 1
  var bar = React.createElement(Bar, null); // my custom component 2
  React.createElement(MyComponent, { attachedComponents: [foo, bar] });
  
  Arrays are objects and typeof is weird. typeof someArray always returns "object":
  
  console.log(typeof []);
  
  The correct way to test for an array is to use Array.isArray:
  
  console.log(Array.isArray([]));
  console.log(Array.isArray({}));
  
  I have seen this.props.children, but this does not seem reliable at all
  
  Well, it is reliable, it just doesn't always return the same type of value. There are many helper functions available to process this.props.children. Have a look at React.Children. E.g. you can use React.Children.toArray(this.props.children) to convert the value to a true array.
  The part you highlighted in the quote simple means that you shouldn't change the value of this.props.children itself. But that is not unreasonable in any way.
  
  