Tengo la siguiente matriz de objetos. Solo quiero mostrar el nombre y su imagen.
0: {name: 'Dips & Spreads', children_count: '4', id: 3, image: 'https://wingreens-dev.codilar.in/media/catalog/category/1_1_1.png', include_in_menu: 1, …} 1: {name: 'Hummus', children_count: '0', id: 46, image: 'https://wingreens-dev.codilar.in/media/catalog/category/1_3_1.png', include_in_menu: 1, …} 2: {name: 'Greek Yogurt', children_count: '0', id: 47, image: 'https://wingreens-dev.codilar.in/media/catalog/category/2_1_1.png', include_in_menu: 1, …}Y traté de mostrar el nombre primero en el siguiente código
renderBestSellerCategories(){ console.log('aaa', this.bestSellerCategories); const listItems = this.bestSellerCategories.map((d) => <li key={d.name}>{d.name}</li>); if(this.bestSellerCategories.length) { return( <div> <h1>reactjs</h1> </div> ) } else{ return( <div> {listItems} </div> ) } } render(){ return( {this.renderBestSellerCategories()}) }
No puedo mostrar los nombres en la interfaz. Como hacer eso alguna solucion por favor
puede usar directamente las categorías de bestSeller
renderBestSellerCategories(){ console.log('aaa', this.bestSellerCategories); return ( <div> {this.bestSellerCategories.map((d) => <li key={d.name}>{d.name}</li>);} </div> ) } }Solo necesita actualizar la condición como se muestra en el enlace: https://stackblitz.com/edit/demo-react-class-component-pppahy?file=Demo.js
renderBestSellerCategories(){ console.log('aaa', this.bestSellerCategories); const listItems = this.bestSellerCategories.map((d) => <li key={d.name}>{d.name}</li>); if(!this.bestSellerCategories.length) { return( <div> <h1>reactjs</h1> </div> ) } else{ return( <div> {listItems} </div> ) }}