reactjs - list not ordering well dynamic children -

my problem react not respecting order giving backend.

it gives me warning.

child objects should have non-numeric keys ordering preserved

i checked documentation , don't know error is.

dynamic children

i'm passing key component , doesn't work...

i have films component code

{this.props.films && this.props.films.map((film, i) =>               <filmslistitem key={film.id()} data={film}/> ).tojs()} 

then have filmlistitem this

<div>           <div classname="show-image">               <img onclick={this.modifyfilm.bind(this, this.props.data)}                    src={this.props.data.foto()}                    title={this.props.data.nombre()}                    alt={this.props.data.nombre()}                    width="230"                    height="345"/>               <input type="button"                      classname="delete"                      value="borrar"                      onclick={this.remove.bind(this, this.props.data)}>               </input>               <div classname="diccionarios">                 <button onclick={this.diccionarios.bind(this, this.props.data)}>palabras</button>               </div>             </div>       </div> 

what type of data structure does

this.props.films && this.props.films.map((film, i) =>   <filmslistitem key={film.id()} data={film}/> ).tojs() 

return? guess returns object, , react forced use object's keys (which numeric) keys children.

consider this jsfiddle example demonstrates error:

var test = react.createclass({   render() {     var children = { 1: <div>test1</div>, 2: <div>test2</div> };     return <div>{children}</div>;   } }); 

however, this example uses non-numeric keys, , not give same warning:

var test = react.createclass({   render() {     var children = { a: <div>test1</div>, b: <div>test2</div> };     return <div>{children}</div>;   } }); 

neither this one, uses array:

var test = react.createclass({   render() {     var children = [<div key={1}>test1</div>, <div key={2}>test2</div>];     return <div>{children}</div>;   } }); 

since keys of objects strings:

var test = { 1: true }; console.log(test["1"]); // true 

react can't guarantee ordering of values of child object:

["1", "2", "9", "10", "11", "19", "20", "21", "30"].sort() // ["1", "10", "11", "19", "2", "20", "21", "30", "9"] 

consider transforming data array instead.