CODEWITHSUNDEEP
reactjsjsx
Jacob
Jacob

Reputation: 78

How would I display a specific object in a array in react?

I get an API response and I can display all 20 results from the response and all 20 descriptions. I want to display them by index and they are already indexed in the response. I don't know how to select the object in the array of articles and display a specific article.

Here is my response:

API Response

And here is my code:

    render() {
        let articles = this.state.articles;
        return (
            <div>
                <ExpansionPanel>
                        {articles.map(article => (<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{article.title[0]}</Typography></ExpansionPanelSummary>))}
                    <ExpansionPanelDetails>           
                            {articles.map((article) => (
                                <Typography>{article.description}</Typography>
                            ))}<br />
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            </div>
        );

//Fixed article title but article description is repeating.

I can specify what title I want to get however when I use this.state.articles[0].description I get repeating results in the drop-down.

Repeating Descriptions

Correlating code:

<ExpansionPanel>
                    {articles.map(articles => (<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{this.state.articles[1].title}</Typography></ExpansionPanelSummary>))}         
                    {articles.map((articles) => (<ExpansionPanelDetails><Typography>{this.state.articles[1].description}</Typography></ExpansionPanelDetails>))}<br />
</ExpansionPanel>

// Added new snippet

{articles.map((articles, index) => (
                    <div>
                        <ExpansionPanel key={index}>
                            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{this.state.articles.title}</Typography></ExpansionPanelSummary>       
                            <ExpansionPanelDetails><Typography>{this.state.articles.description}</Typography></ExpansionPanelDetails><br />
                        </ExpansionPanel>
                    </div>
                ))}

// Fixed... had to use the property articles instead of this.state.articles. This fixed the repeat issue and the display issue.

Upvotes: 0

Views: 838

Answers (4)

Shubham Agarwal Bhewanewala
Shubham Agarwal Bhewanewala

Reputation: 1119

<div>
    <ExpansionPanel>
        {articles.map(article => (
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{article.title}</Typography></ExpansionPanelSummary>
            <ExpansionPanelDetails>           
                <Typography>{article.description}</Typography>
            </ExpansionPanelDetails>))}
    </ExpansionPanel>
</div>

It is not completely clear what you want. But what I could guess is, you want something like this

index1---summary
--index1 detail hidden or whatever
index2---summary
--index2 detail hidden or whatever
index3---summary
--index3 detail hidden or whatever

You can try above code

Upvotes: 2

Olivier JM
Olivier JM

Reputation: 165

The reason why the description is repeating is because of the second loop, if you need description from the each article , you will just need to get it as specified by @code-apprentice here, the extra map is not needed as it will give you repeated results except the title since it is on top. I hope this helps.

Upvotes: 1

Code-Apprentice
Code-Apprentice

Reputation: 83527

It sounds like you want an <ExpansionPanel> for each article. This means you need to map() over the array like this:

render() {
    let articles = this.state.articles;
    return <div>
        {articles.map((article, index) => <ExpansionPanel key={index}>
            ...
         </ExpansionPanel>}
    </div>;
}

Now in the place of the ... in the code example, you can add whatever other components you want, such as <ExpansionPanelSummary> or <ExpansionPanelDetails>. You can also use any properties of the article such as article.description.

Upvotes: 1

Anil Kumar
Anil Kumar

Reputation: 2309

You can access specific post using array article[2].title[0]. This will fetch article number 2 from the response.

You code is not working as some issue with response. Please check but this approach will work to fetch second article.

    render() {
        let articles = this.state.articles;
        return (
            <div>
                <ExpansionPanel>
                        {articles.map(article => (<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}><Typography>{**article[2].title[0]**}</Typography></ExpansionPanelSummary>))}
                    <ExpansionPanelDetails>           
                            {articles.map((article) => (
                                <Typography>{article.description}</Typography>
                            ))}<br />
                    </ExpansionPanelDetails>
                </ExpansionPanel>
            </div>
        );

Upvotes: 0

Related Questions