Unable to retrieve json values to table

Question

const App = () => {

   const [symbol, setSymbol] = useState([]);
   const [loading, setLoading] = useState(false);
   const getSymbolData = async () => {
     try{
       const data = await axios.get("https://cloud.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD");
       console.log(data);
       setSymbol(data.data);
     } catch (e) {
       console.log (e);
     }
   };

const columns = [

  {dataField: "price", text: "Current Price"},
  {dataField: "symbol", text: "Symbol" },
  {dataField: "companyName", text : "Company Name"}

];
 useEffect (() => { 
   getSymbolData();
   }, []);
  return (
   <div className="App"> 
  
      <BootstrapTable
      keyField= "symbol"
      data= {symbol}
      columns={columns}
      pagination={paginationFactory()}
      />  
  </div>
  );
};

export default App;

JSON results -

Console output:

Blockquote

{data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …} config: {url: "https://cloud.iexapis.com/stable/stock/market/batc…s,quote&token=", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …} data: {PGX: {…}, MORL: {…}, EMLC: {…}, GYLD: {…}, IPFF: {…}, …} headers: content-type: "application/json; charset=utf-8" proto: Object request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …} status: 200

Answer 1

Based on the error result, you are passing an object to data prop at
<BootstrapTable data={symbol}> which expects an array

Your axios response seem to be a big object, and this prop expects an array of objects

at first its defined as an array:

const [symbol, setSymbol] = useState([]);

but when you setState it becomes an Object (in view of the JSON response you showed) and that's when the error occurs

setSymbol(data.data);

see examples here of how data is structured to work with BoostrapTable