0

Update: This problem seems to be related to mongoose. Please see update at the bottom.

In the parent I use the following code to pass choosenItem to a grandChild:

childContextTypes: {
        foo: React.PropTypes.object.isRequired,
         },

   getChildContext: function() {
        return { foo: this.state.choosenDriver }
   },

choosenDriver is a mongoose Model that looks like this:

var Schema    = mongoose.Schema;
var driverSchema = new mongoose.Schema({

  driver: String,
  age: String,
  cars: [{ type: Schema.Types.ObjectId, ref: 'Car' }]

});
module.exports = mongoose.model('Driver', driverSchema);

This works fine and in the GrandChild I can do the following:

contextTypes: {
      foo: React.PropTypes.object.isRequired,
  },

//some other stuff...

render: function(){
  return (
            <h1>{this.context.foo.name}</h1>
          )
});

And this displays the name of the choosenDriver.

I would also like to loop through the cars and thought it could be done like this:

render: function(){

   var cars = new Array(this.context.foo.cars);
   var driversCars = cars.map(function(car,i){
   return <li key={i}> {car} </li>;
   });
  return (
         <div>
            <h1>{this.context.foo.name}</h1>
            <ul>{driversCars}</ul>
         </div>

  )
}

 });

This returns all the drivers cars in a string displayed on one single line. I took a look in react developers tool and saw that cars is not defined as an Array.

Is this maybe because choosenDriver is a state and arrays are not supported in this manner?

The cars obviously exists but not as an Array.

Any ideas on how to access cars as an Array in this example?

Thank you!

Update:

When looking at this.context.foo.cars in react-Tools i see this:

cars: 
->_proto_ :{..} 
0: "4242594395935934", 
1: "3543435095340509"
etc...

cars should be an Array so I would expect to see:
cars: Array[4]

Allthough in the DB everythingg looks as it should:

"cars":["5607b0747eb3eefc225aed61","5607b07a7eb3eefc225aed62","5606bf4b0e76916c1d1668b4","5607b07a7eb3eefc225aed62"]}]

Last Update: Here they are next to eachother i react Tools: (I have a list of drivers and this shows that the Driver-object Changes when it gets selected)

State:
choosenDriver: {..}
 _v:0
 _id: "235345353453"
 name: "Roger"
 cars: 
    ->_proto_ :{..} 
    0: "4242594395935934", 
   _id: undefined 


Same driver but not choosen:
drivers: array[3]
 ->0: {}
 ->1: {}
      _v: 0
      _id: "4242594395935934"
      cars: Array[1]

So something happens to the Array when it gets selected. Weird...

RogerDore
  • 93
  • 1
  • 7
  • React object can handle arrays in their state without a problem, maybe you could add the moongose tag to this questions, I'm pretty sure the problem is there. – macareno.marco Sep 30 '15 at 17:01
  • Do you mean `cars` is not an Array or `this.context.foo.cars` is not an Array? – pherris Sep 30 '15 at 17:04

1 Answers1

1

If you mean cars is not the Array you expect (and not this.context.foo.cars)...

The Array constructor builds an array with each argument to the constructor as an element in the returned array.

So, new Array([1,2,3]) gives you: [[1,2,3]].

You want Array.from([1,2,3]) which will give you [1,2,3] which appears to be what you want.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

But with your code, why can't you just skip creating the intermediate array and just call this.context.foo.cars.map(...) directly?

pherris
  • 17,195
  • 8
  • 42
  • 58
  • Yes, this.context.foo.cars.map(...) was my first attempt but it returns: cannot read property 'map' of undefined. So I guess the cars is not a 'proper' Array as the comment above suggests. – RogerDore Sep 30 '15 at 17:07
  • Ok, this answer doesnt really apply then - but I'll leave it because the fact that `this.context.foo.cars` is `undefined` and not something else is hugely relevant to your question - you should update with that detail and then I'll delete this answer. – pherris Sep 30 '15 at 17:08
  • Thank you, I updated the question to better reflect the actual problem. – RogerDore Sep 30 '15 at 17:23
  • did you try `var driversCars = [];this.context.foo.cars.forEach(function(car) { driverCars.push(
  • {car}
    • );})`. Looks like mongoosejs offers a foreach: http://mongoosejs.com/docs/3.7.x/docs/api.html#index_Mongoose-Collection – pherris Sep 30 '15 at 17:33
  • Thank you, but this returns cannot read property 'foreach' of undefined, I Think I must have made a mistake createing the Array in mongoose given that cars appearently is not an Array. But I thank you. – RogerDore Sep 30 '15 at 17:38