I have the below array of objects I just want to display name and its image
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, …}
And I tried to display the name first in the below code
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()}) }
I am not able to display the names in the frontend. How to do that any solution please
you can directly use bestSellerCategories
renderBestSellerCategories(){
console.log('aaa', this.bestSellerCategories);
return (
<div>
{this.bestSellerCategories.map((d) => <li key={d.name}>{d.name}</li>);}
</div>
)
}
}
You just need to update condition as shown on link : 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>
)
}
}