title: How to make React Hooks return an array
body: <p>I have some hard-coded data in my React app which I would now like to fetch from an API. I would like to preserve the array-like format because that is how the data is used down the road.</p>
  
  <p>My original component:</p>
  
  <pre><code>import moment from 'moment';
  
  const INITIAL_STATE = {
    articles:
      [
        {
          title: 'Guerrilla Public Service Redux (2017)',
          tag0: 'story',
          points: 421,
          created_at: moment('2020-05-27T16:05:32.000Z'),
          author: 'DerWOK',
        },
        {
          title: 'Build Yourself a Redux',
          tag0: 'story',
          points: 395,
          created_at: moment('2020-05-27T16:05:32.000Z'),
          author: 'jdeal',
        },
      ],
  };
  
  function Articles (state = INITIAL_STATE) {
        return state;
  }
  
  export default Articles;
  </code></pre>
  
  <p>This is how I imagine it to work but what should be in the return() below is a mystery to me:</p>
  
  <pre><code>import moment from 'moment';
  
  function Articles() {
    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [items, setItems] = useState([]);
  
    useEffect(() =&gt; {
      fetch("https://hn.algolia.com/api/v1/search?query=redux")
        .then(res =&gt; res.json())
        .then(
          (result) =&gt; {
            setIsLoaded(true);
            setItems(result.items);
          },
          (error) =&gt; {
            setIsLoaded(true);
            setError(error);
          }
        )
    }, [])
  
    if (error) {
      return &lt;div&gt;Error: {error.message}&lt;/div&gt;;
    } else if (!isLoaded) {
      return &lt;div&gt;Loading...&lt;/div&gt;;
    } else {
      return (
  
          {items.map(item =&gt; (
           ???)
      );
    }
  }
  
  export default Articles;
  </code></pre>
  
  <p>Edit: I do have the list component to render the data. I just need to return the data in acceptable form.</p>