title: useState doesn't render results of axios call using async/await with React Hooks
body: <p>I'm new to React Hooks and I'm unable to fix a State issue. I've read elsewhere on Stack Overflow about the asynchronous nature of useState/useEffect and it seems that whatever I try, including async/await, I cannot assign the JSON array results to my [data, callback] to render elements of the returned data in a simple table in my main App(.js) - see below. I've got an <code>App.js</code>, a <code>Hooks.js</code> and a <code>Tradetable.js</code> where the table of elements is populated (and the latter two files are imported inside <code>App.js</code>).</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { useState, Fragment } from 'react'
  import AddTradeForm from './forms/AddTradeForm'
  import EditTradeForm from './forms/EditTradeForm'
  import TradeTable from './tables/TradeTable'
  import { useFetch } from './Hooks'
  
  const App = () =&gt; {
      // get Data from API call
      const URL = "http://192.168.1.1:3000/api/queryMyCommodity"; //
      const tradeData = useFetch(URL, {username:'john', channel:'channel1', name: 'GOLD'}); // the result of this `axios` call inside `useFetch` (in Hooks.js below), is exactly the same as the commented `const` line below - which would work just fine for table item rendering, ie when testing with a JSON array of 3 table items.
  
  // const tradeData = [{"class":"demoCommodity","description":"really fabulous gold","fcn":"demoCreate","id":"trade001","name":"GOLD","owner":"JOHAN.BRINKS","tradename":"GLD"},{"class":"org.example.trading.Commodity","description":"more fabulous gold","fcn":"demoCreate","id":"trade004","name":"GOLD","owner":"NED.SLIVOVITZ","tradename":"GLD"},{"class":"org.example.trading.Commodity","description":"absolutely fabulous gold","fcn":"demoCreate","id":"trade005","name":"GOLD","owner":"ED.GOLDBERG","tradename":"GLD"}]
  
      // Setting state
      const [trades, setTrades ] = useState(tradeData); // this is the line with the issue
      console.log("trades in App is set to " + JSON.stringify(trades)); // `trades` is empty [] but `tradeData` has data, being evaluated later perhaps?
      const initialFormState = { id: '' , name: '', tradename: '' }; // not using all fields in form fyi
      const [ currentTrade, setCurrentTrade ] = useState(initialFormState)
      const [ editing, setEditing ] = useState(false)
  
      // CRUD operations
      const addTrade = trade =&gt; {
          trade.id = trades.length + 1
          setTrades([ ...trades, trade ])
      }
  
      const deleteTrade = id =&gt; {
          setEditing(false)
  
          setTrades(trades.filter(trade =&gt; trade.id !== id))
      }
  
      const updateTrade = (id, updatedTrade) =&gt; {
          setEditing(false)
  
          setTrades(trades.map(trade =&gt; (trade.id === id ? updatedTrade : trade)))
      }
  
      const editRow = trade =&gt; {
          setEditing(true)
  
          setCurrentTrade({ id: trade.id, name: trade.name, tradename: trade.tradename })
      }
  
      return (
          &lt;div className="container"&gt;
              &lt;h1&gt;Trading App CRUD-style&lt;/h1&gt;
              &lt;div className="flex-row"&gt;
                  &lt;div className="flex-large"&gt;
                      {editing ? (
                          &lt;Fragment&gt;
                              &lt;h2&gt;Edit trade&lt;/h2&gt;
                              &lt;EditTradeForm
                                  editing={editing}
                                  setEditing={setEditing}
                                  currentTrade={currentTrade}
                                  updateTrade={updateTrade}
                              /&gt;
                          &lt;/Fragment&gt;
                      ) : (
                          &lt;Fragment&gt;
                              &lt;h2&gt;Add trade&lt;/h2&gt;
                              &lt;AddTradeForm addTrade={addTrade} /&gt;
                          &lt;/Fragment&gt;
                      )}
                  &lt;/div&gt;
                  &lt;div className="flex-large"&gt;
                      &lt;h2&gt;View trades&lt;/h2&gt;
                      &lt;TradeTable trades={trades} editRow={editRow} deleteTrade={deleteTrade} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default App
  </code></pre>
  
  <p><strong>Hooks.js</strong></p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import axios from 'axios'
  
  const useFetch = (httpurl, options) =&gt; {
  const [mydata, setData] = useState([]);
  
    useEffect(() =&gt; {
      async function fetchData() {
         const response = await axios({
                method: 'POST',
                url : httpurl,
                headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
                },
                data: options
        });
        setData(response.data);  // what comes back is set to a JS variable called 'data'
      }
      fetchData();
    }, [httpurl]);
  
     return mydata;
  };
  
  export { useFetch };
  </code></pre>
  
  <p><strong>tables/TradeTable.js</strong></p>
  
  <pre><code>import React from 'react'
  
  // this is where the App will process `trades` and process/render to view in a table, then take a CRUD action etc.
  
  const TradeTable = props =&gt; (
    &lt;table&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Name&lt;/th&gt;
          &lt;th&gt;Tradename&lt;/th&gt;
          &lt;th&gt;Trade Actions&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        {props.trades.length &gt; 0 ? (
          props.trades.map(trade =&gt; (
            &lt;tr key={trade.id}&gt;
              &lt;td&gt;{trade.name}&lt;/td&gt;
              &lt;td&gt;{trade.tradename}&lt;/td&gt;
              &lt;td&gt;
                &lt;button
                  onClick={() =&gt; {
                    props.editRow(trade)
                  }}
                  className="button muted-button"
                &gt;
                  Edit
                &lt;/button&gt;
                &lt;button
                  onClick={() =&gt; props.deleteTrade(trade.id)}
                  className="button muted-button"
                &gt;
                  Delete
                &lt;/button&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          ))
        ) : (
          &lt;tr&gt;
            &lt;td colSpan={3}&gt;No trades&lt;/td&gt;
          &lt;/tr&gt;
        )}
  </code></pre>
  
  <p>So - how to ensure that <code>trades[]</code> is populated from the data coming from the <code>axios</code> call and represents the new State ? In particular, the 'View trade' bit further down <code>App.js</code></p>
  
  <p>much appreciated in advance for any guidance!</p>