react jsx - Refs in dynamic components with ReactJS -

i'm facing issue , haven't found documentantion related.

this component's render method:

render() {   return (     <div refs="mycontainer">     </div>   ); } 

additionally have method data java server:

getasyncdata() {   $.get('...url...')     .done(function(response) {       var list = json.parse(response); // objects array       var elementslist = [];        list.foreach(function(item) {         elementslist.push(<div ref={item.id}>{item.name}</div>);       });        react.render(elementslist, react.finddomnode(this.refs.mycontainer));     }); } 

in componentdidmount method start async method:

componentdidmount() {   this.getasyncdata(); } 

so i'm getting error reactjs:

only reactowner can have refs. means you're trying add ref component doesn't have owner (that is, not created inside of component's render method). try rendering component inside of new top-level component hold ref.

so means i'm not able use dynamic elements, additionally think instead of simple div have complex component methods within.

how can deal this?

thank you!

how can deal this?

by writing component how supposed to. keep data in state. .render() called when state changes, updating output.

example:

var component = react.createclass({   getinitialestate() {     return {items: []};   },    getasyncdata() {     $.get(...).done(       response => this.setstate({items: json.parse(response)})     );   },    render() {     var list = this.state.items.map(       item => <div key={item.id} ref={item.id}>{item.name}</div>     );     return <div>{list}</div>;   } }); 

that's react about: describing output based on data. not adding or removing elements dynamically, update state, rerender , let react figure out how reconcile dom.
however, it's unclear me why need ref in situation.

i recommend read https://facebook.github.io/react/docs/thinking-in-react.html