title: How would I display a specific object in a array in react?
body: <p>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.</p>
  
  <p>Here is my response:</p>
  
  <p><a href="https://i.stack.imgur.com/5cKgF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5cKgF.png" alt="API Response"></a></p>
  
  <p>And here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    render() {
          let articles = this.state.articles;
          return (
              &lt;div&gt;
                  &lt;ExpansionPanel&gt;
                          {articles.map(article =&gt; (&lt;ExpansionPanelSummary expandIcon={&lt;ExpandMoreIcon /&gt;}&gt;&lt;Typography&gt;{article.title[0]}&lt;/Typography&gt;&lt;/ExpansionPanelSummary&gt;))}
                      &lt;ExpansionPanelDetails&gt;           
                              {articles.map((article) =&gt; (
                                  &lt;Typography&gt;{article.description}&lt;/Typography&gt;
                              ))}&lt;br /&gt;
                      &lt;/ExpansionPanelDetails&gt;
                  &lt;/ExpansionPanel&gt;
              &lt;/div&gt;
          );</code></pre>
  </div>
  </div>
  </p>
  
  <p>//Fixed article title but article description is repeating.</p>
  
  <p>I can specify what title I want to get however when I use <code>this.state.articles[0].description</code> I get repeating results in the drop-down.</p>
  
  <p><a href="https://i.stack.imgur.com/oRKiZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oRKiZ.png" alt="Repeating Descriptions"></a></p>
  
  <p><strong>Correlating code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;ExpansionPanel&gt;
                      {articles.map(articles =&gt; (&lt;ExpansionPanelSummary expandIcon={&lt;ExpandMoreIcon /&gt;}&gt;&lt;Typography&gt;{this.state.articles[1].title}&lt;/Typography&gt;&lt;/ExpansionPanelSummary&gt;))}         
                      {articles.map((articles) =&gt; (&lt;ExpansionPanelDetails&gt;&lt;Typography&gt;{this.state.articles[1].description}&lt;/Typography&gt;&lt;/ExpansionPanelDetails&gt;))}&lt;br /&gt;
  &lt;/ExpansionPanel&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>// Added new snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{articles.map((articles, index) =&gt; (
                      &lt;div&gt;
                          &lt;ExpansionPanel key={index}&gt;
                              &lt;ExpansionPanelSummary expandIcon={&lt;ExpandMoreIcon /&gt;}&gt;&lt;Typography&gt;{this.state.articles.title}&lt;/Typography&gt;&lt;/ExpansionPanelSummary&gt;       
                              &lt;ExpansionPanelDetails&gt;&lt;Typography&gt;{this.state.articles.description}&lt;/Typography&gt;&lt;/ExpansionPanelDetails&gt;&lt;br /&gt;
                          &lt;/ExpansionPanel&gt;
                      &lt;/div&gt;
                  ))}</code></pre>
  </div>
  </div>
  </p>
  
  <p>// Fixed... had to use the property <code>articles</code> instead of <code>this.state.articles</code>. This fixed the repeat issue and the display issue. </p>