HTML Link inside Javascript array in react

Question

I have the following code where I need to insert a link inside java script code in React

const stocksArray = []

    const rows = store.stocks.map((stock, index) => {
        stocksArray.push(
            {
                id: index+1,
                symbol: <a href={`/symbol/${stock.symbol}`}>stock.symbol</a>,
                volAvg: stock.volAvg,
                mktCap: stock.mktCap,
            }
        )
    });

I get the following output

[object Object]
1129503
865079358

The stock symbol and a link directing to it's page should have been printed instead of [object Object]

Here is the full code, where I am using DataGrid component from MUI. Simply including the html tags will not work as shown above.

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { DataGrid } from '@mui/x-data-grid';
import ScreenerStocks from '../store/tradeStore';
import '../css/datagrid.css';

const columns = [
  { field: 'symbol', 
    headerName: 'Symbol', 
    width: 130, 
    disableColumnMenu: true, 
    resizable: false, 
    headerClassName: 'datagrid-header-style',
},
  { field: 'volAvg', 
    headerName: 'volAvg', 
    width: 130, 
    disableColumnMenu: true, 
    resizable: false, 
    headerClassName: 'datagrid-header-style' 
},
  { field: 'mktCap', 
    headerName: 'mktCap', 
    width: 130, 
    disableColumnMenu: true, 
    resizable: false, 
    headerClassName: 'datagrid-header-style' 
},
];

export default function Screener() {
    const store = ScreenerStocks();

    useEffect(() => {
        store.fetchStocks();
    }, [])

    const stocksArray = []

    const rows = store.stocks.map((stock, index) => {
        stocksArray.push(
            {
                id: index+1,
                symbol: stock.symbol,
                volAvg: stock.volAvg,
                mktCap: stock.mktCap,
            }
        )
    });

  return (
    <BrowserRouter>
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={stocksArray}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: { page: 0, pageSize: 10 },
          },
        }}
        pageSizeOptions={[5, 10]}
        sx= {{
            'MuiDataGrid-columnHeaderTitle': {
                fontWeight:'bold !important',
            }
        }}
        disableRowSelectionOnClick
      />
    </div>
    </BrowserRouter>
  );
}

Answer 1

You should build a tag in your render, the symbol in your map should be the href string

const stocksArray = store.stocks.map((stock, index) => {
    return {
            id: index+1,
            symbol: `/symbol/${stock.symbol}`,
            volAvg: stock.volAvg,
            mktCap: stock.mktCap,
        }
});

Also you don't have to push into a new array, instead you can return the object in your map, just like I did

You must define the renderCell in the column symbol:

  const columns = [
  {
    field: "symbol",
    headerName: "Symbol",
    width: 130,
    disableColumnMenu: true,
    resizable: false,
    headerClassName: "datagrid-header-style",
    renderCell: (params) => <a href={`/symbol/${stock.symbol}`}>stock.symbol</a>,
  },
  {
    field: "volAvg",
    headerName: "volAvg",
    width: 130,
    disableColumnMenu: true,
    resizable: false,
    headerClassName: "datagrid-header-style",
  },
  {
    field: "mktCap",
    headerName: "mktCap",
    width: 130,
    disableColumnMenu: true,
    resizable: false,
    headerClassName: "datagrid-header-style",
  },
];