How to render an array of object with specified keys

90
October 07, 2021, at 4:00 PM

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

Answer 1

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

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

}

Rent Charter Buses Company
READ ALSO
Connecting to MySQL using a token

Connecting to MySQL using a token

I've been trying to connect to an RDS instance using the sqlalchemy library using a tokenAccording to the docs it should be possible via the cparams['token'] variable, but doing so I get an error of an unexpected argument

134
Making custom Header request to be required

Making custom Header request to be required

I have a tsoa request, where I'm trying to include a custom required header, but it can only be added as optional like this@Header('X-Correlation-Id') correlationId?: string I really would like it to be required, is there away to achieve this?

97
How do I dismiss view after user enter the code? Android

How do I dismiss view after user enter the code? Android

I'm working on an existing project for adding a Lock screen for the user to enter the codeAfter verifying the code the Lock Screen will dismiss and the user can use the app normally

75
Upload excel in django and display in 4 different webpages

Upload excel in django and display in 4 different webpages

I want to upload an excel file containing 4 columns and display each column in different page

50