I like this in the store, all have different heights, I want to set the height of each element to its width. When expanding a window, the following JQuery code works fine:
function setHeight() { $('.product__img').height($('.product__img').width()); } $(window).resize(function () { setHeight(); }) 
However, when rendering a page, I can’t figure out how to set the height of an element. Render code of the React component:
renderClothes(clothe, index) { return ( <div className="product__griditem" key={index}> <Link to={`clothes/${clothe.id}`} className="product "> <div className="product__img z-depth-1"><img src={clothe.image}/></div> <div className="product__info"> <span className="product__name">{clothe.name}</span> <span className="product__disc">{clothe.description}</span> {this.setRating(clothe.rating)} <span className="product__price">${clothe.price}</span> </div> </Link> </div> ) } render() { const data = this.props.clothes console.log('data', data); return ( <div className="content"> <div className="product__grid"> { data.map((clothe, index) => this.renderClothes(clothe, index)) } </div> </div> ); } 