Why i get this error "Uncaught Invariant Violation: Frame.render():"?

Full msg: > react.js:18893 Uncaught Invariant Violation: Frame.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Here is my constructor for collumns, i got error when try to parse this array that contain elements for creating html elements

makeCollumns: function(num, obj){
				  
				  // CHECKED THAT OBJ HAVE CORRECT DATA
				  console.log("obj[0].username= " + obj[0].username ); 

                            // ALSO CHECKED THAT NUM HAVE CORRECT INTEGER
				  console.log("num: " + num);

				function collumn(i, data){
				 return( 
				   <div className={'row rOw-' + i}>
					  <div className="col-xs-1">
						  {(i+1)}
					  </div> 
					  <div className={'col-xs-5 user-name-'+ i}>
						  {data.username} 
					  </div>
					  <div className={'col-xs-3 user-montly-'+ i}>
						  {data.recent}
					  </div> 
					  <div className={'col-xs-3 user-alltime-'+ i}>
						  {data.alltime} 
					  </div>
					</div>
					  );
				}
				
				var markupPredefined = [];
				for ( let i = 0 ; i < num; i ++ )
				  markupPredefined.push(collumn(i, obj[i]));


				return markupPredefined;
			  
			  }

EDIT: Code:
http://codepen.io/ustvarno/pen/VjKGqo/
solve it, by putting brackets around returned array {} so children in array can be evaluated to JSX :slight_smile:

I’m not sure where this is in relation to the rest of your code, but every React component needs to have a render function. This function you’ve defined must run in the render function, and the render function must return all of the output with exactly one root element. So, call this function within a <div> tag and return that output.

1 Like

I solve it, by putting brackets around returned array {} so children in array can be evaluated to JSX :slight_smile: