0

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.

Improve this question
10
  • I've posted an answer that addresses how to get a single element from an array. I think there may be more to your question, however. How do you want to display the element that you select? I mean, what do you want this to look like in the web page. One way to help explain this is to open MS Paint or a similar program and draw a rough example of what you want the page to be. Commented Jul 30, 2018 at 6:24
  • 1
    i think your question is a javascript related question not react. if i understand correctly i think you could use this.state.articles[index] Commented Jul 30, 2018 at 6:39
  • I want to display a title and when you click it a drop-down with the correlating description is shown. Commented Jul 30, 2018 at 6:47
  • @J.Borga edit your question to show how you generated the output in the screenshot Commented Jul 30, 2018 at 6:57
  • 1
    Instead of mapping over the articles array twice, you should only map over it once. See my answer for details. Commented Jul 30, 2018 at 7:03

4 Answers 4

Reset to default
2 
<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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

The response isn't indexed at the title. I can fetch a specific item using this.state.articles[0].title however when I use description it comes up with repeating results.
You probably need article.title instead of article.title[0].
Do you have complete data at once?
@Code-Apprentice that was a copy paste mistake :P
1

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.

Improve this answer

7 Comments

It worked however, when I do this.state.articles[0].description It comes up with repeating results.
I get this Warning: Each child in an array or iterator should have a unique "key" prop when I map them.
@J.Borga Note that is only a warning. You still should get some output. Did you fill in the ... from my code? Were you able to get satisfactory results? To fix the warning just add a key with the index from the array as shown in my most recent edit.
I added a snippet of what I have... I had to add a <div> because it needs a parent element. It doesn't come up with any results however. There are tabs but there is no title or description.
@J.Borga Use article.title or article.description.
|
1

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.

Improve this answer

Comments

0

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

Improve this answer

5 Comments

Each article is an object, not an array.
Select article in array using articles[2].objectproperty. SO it will become article[2].title
It does select the 3rd article if I do articles[2].title however when I do articles[2].description it repeats multiple descriptions.
articles[2] is very different than article[2]. You can do either artciles[2].title or article.title. Since you are mapping over the array, the second one is probably what you want.
Remove map on articles which is a loop on complete array thats why your seeing all articles. If you want to see specific article use articles[2].description . I you want to show article based on some action then and pass the index(ex. 2 ) dynamically via props and then syntax will be articles[this.props.index].description .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.