title: How to Render Data from API to Table in ReactJS (Function Component)
body: <p>I'm learning Tables in ReactJS and unable to render the fetched data in the columns.
  Actually, the API is fetched (in console) but not rendering its objects as columns in the Material UI Table.</p>
  <p>API Used = api.twelvedata.com/cryptocurrencies,
  Method = Get, Axios</p>
  <p>I want to render ALL the symbols and currency quote from API to the table in the following tabular format:</p>
  <p><a href="https://i.stack.imgur.com/GA44U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GA44U.png" alt="enter image description here" /></a></p>
  <p>Plz Help, if possible please explain the mistake.</p>
  <pre><code>import React from 'react'
  import { useState, useEffect } from 'react'
  import axios from 'axios'
  
  import Table from '@mui/material/Table';
  import TableCell from '@mui/material/TableCell';
  import TableContainer from '@mui/material/TableContainer';
  import TableHead from '@mui/material/TableHead';
  import TableRow from '@mui/material/TableRow';
  import Paper from '@mui/material/Paper';
  
  
  export default function BasicTable() {
    const [data,setData] = useState([])
    const columns = [
      {field: 'symbol'},
      {field: 'currency_quote'},
    ]
    useEffect(()=&gt;{
      axios.get(`https://api.twelvedata.com/cryptocurrencies`)
      .then(
        (a)=&gt;{
          console.log(a.data)
          setData(a.data.symbol)
        }
      )
      .catch(
        (b)=&gt;{
          console.log(Error)
        }
      )
    },[])
    return (
      &lt;TableContainer component={Paper}&gt;
        &lt;Table sx={{ minWidth: 650 }} aria-label=&quot;simple table&quot;&gt;
          &lt;TableHead&gt;
            &lt;TableRow&gt;
              &lt;TableCell&gt;Stock Name&lt;/TableCell&gt;
              &lt;TableCell&gt;Quote&lt;/TableCell&gt;
            &lt;/TableRow&gt;
          &lt;/TableHead&gt;
          {data &amp;&amp; columns.map(data=&gt;&lt;div&gt;{data.field}&lt;/div&gt;)}
        &lt;/Table&gt;
      &lt;/TableContainer&gt;
    );
  }
  </code></pre>