error: Uncaught Invariant Violation: reactjs, cargar array

[fernandooj]

hola a todos:
de antemano estare muy agradecido quien me pueda ayudar con esta linea
tengo esto

Código Javascript:

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>
            )
        }
 
    })
 

y tengo este error:
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_