CODEWITHSUNDEEP
arraysjsonreactjsreactive-programming
FERNANDO ORTIZ
FERNANDO ORTIZ

Reputation: 329

Uncaught Invariant Violation: reactjs, load array

the error should this in what I call the arrangemen

var Modulo5_ = React.createClass({ 
render: function() {
  return(
       <img src={this.props.ruta} className="img-responsive" />
       <p>{this.props.title}</p>
)
}) 

var Modulo5 = React.createClass({ 
    getInitialState: function(){
    	return { tituloRopa:[
    			{titulo:'ropa uno', ruta:'img/img1.jpg'},
			{titulo:'ropa dos', ruta:'img/img2.jpg'},
			{titulo:'ropa tres', ruta:'img/img3.jpg'},
    		]}
    	},
    render: function(){
    	return(
    		<header>
    		   <div>
    			 {
    			   this.state.tituloRopa.map(function(titleRop, rutaRop,  i){
    				return(
    				  <Modulo5_ key={i} title={tituloRop} ruta={rutaRop}>
                                      </Modulo5_>	
    				)
    			   })
    			 }
    	           </div>
    		 </header>
    		)
    	}

    })

and i have this error: Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {titulo, ruta}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Modulo5_.

Upvotes: 1

Views: 350

Answers (2)

Oleksandr T.
Oleksandr T.

Reputation: 77482

In your code there are several mistakes

  1. React component must have only one root element

    var Modulo5_ = React.createClass({ 
  render: function() {
     return <div>
       <img src={this.props.ruta} className="img-responsive" />
       <p>{this.props.title}</p>
     </div>
  }
})

  2. In .map first argument is element being processed in the array, so in this case it is Object therefore you need just get properties from it using . notation(el.titulo)

    {this.state.tituloRopa.map(function(el,  i) {
   return <Modulo5_ key={i} title={el.titulo} ruta={el.ruta } />
})}

Example

Upvotes: 2

harun
harun

Reputation: 1919

Your anonymous function in the map uses incorrect parameters. Array.prototype.map gives calls your mapper function with each item in the array as the first parameter and the index as the second parameter. Try the following. 

   this.state.tituloRopa.map(function(item,  i){
	return(
	  <Modulo5_ key={i} title={item.tituloRop} ruta={item.rutaRop}></Modulo5_>	
	)
   })

Upvotes: 0

Related Questions