title: In React How can I fetch data and render a single object in a states array without mapping the whole thing?
body: <p>I have a simple fetch call, that maps the data from the state being passed to the state via fetch. I would like to take only a particular object from the items array. By index I suppose. And display its contents. Basically I do not want to loop out all the data. Instead I would like to control when that data gets displayed. like <code>items[0].name</code> and <code>items[0].email</code> or something like that.</p>
  
  <p>Here is my code and a link to a <a href="https://codesandbox.io/s/romantic-voice-9vjng" rel="nofollow noreferrer">codesandbox</a> for ease of help</p>
  
  <pre><code>import React, { Component } from "react";
  import ReactDOM from "react-dom";
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        items: [],
        isLoaded: false
      };
    }
    componentDidMount() {
      fetch("https://jsonplaceholder.typicode.com/users")
        .then(res =&gt; res.json())
        .then(json =&gt; {
          this.setState({
            isLoaded: true,
            items: json
          });
        });
    }
    render() {
      var { isLoaded, items } = this.state;
      if (!isLoaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      } else {
        return (
          &lt;div className="App"&gt;
            &lt;ul&gt;
              {items.map(item =&gt; (
                &lt;li key={item.id}&gt;
                  Name: {item.name} | Email: {item.email}
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  
  const rootElement = document.getElementById("root");
  ReactDOM.render(&lt;App /&gt;, rootElement);
  
  </code></pre>