Why isn't jsonData reading the file?

Question

i have a json file:

[ {
  "symbol" : "SPY",
  "type" : "etf"
}, {
  "symbol" : "CMCSA",
  "type" : "stock"
}, {
  "symbol" : "KMI",
  "type" : "stock"
}, {
  "symbol" : "INTC",
  "type" : "stock"
}, {
  "symbol" : "MU",
  "type" : "stock"
},
...

And I'm trying to read it into the table:

const Home = () =>{
    const displayStockCodes = (info) =>{
        JsonData.map(
            (info)=>{
                return(
                    <tr>
                        <td>{info.symbol}</td>
                        <td>{info.type}</td>
                    </tr>
                )
            }
        );
    };
    
    return (
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                    <th>Symbol</th>
                    <th>Type</th>
                    </tr>
                </thead>
                <tbody>                
                    {displayStockCodes}               
                </tbody>
            </table>
             
        </div>

    );
};

export default Home;

I tried to do it according to the guide, but in the end only Symbol and Type are displayed on the page, and the data itself is not output. Maybe I need to add something else?

Answer 1

1. displayStockCodes is a function but you are not calling it in the tbody you need to call that function.

2. displayStockCodes also doesn't return anything you need to ensure it returns some JSX code.

const Home = () =>{
    const displayStockCodes = (info) =>{
        // 2. you need to return 
        return JsonData.map(
            (info)=>{
                return(
                    <tr>
                        <td>{info.symbol}</td>
                        <td>{info.type}</td>
                    </tr>
                )
            }
        );
    };
    
    return (
        <div>
            <table className="table table-striped"> <!-- use className here instead of class -->
                <thead>
                    <tr>
                    <th>Symbol</th>
                    <th>Type</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- you need to call this -->     
                    {displayStockCodes()}               
                </tbody>
            </table>
             
        </div>

    );
};

export default Home;

Answer 2

const Home = () => {
    const JsonData = [
        {
            symbol: 'SPY',
            type: 'etf',
        },
        {
            symbol: 'CMCSA',
            type: 'stock',
        },
        {
            symbol: 'KMI',
            type: 'stock',
        },
        {
            symbol: 'INTC',
            type: 'stock',
        },
        {
            symbol: 'MU',
            type: 'stock',
        },
    ];

    const displayStockCodes = () => {
        return JsonData.map((info) => (
            <tr>
                <td>{info.symbol}</td>
                <td>{info.type}</td>
            </tr>
        ));
    };


    return (
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Symbol</th>
                        <th>Type</th>
                    </tr>
                </thead>
                <tbody>{displayStockCodes()}</tbody>
            </table>
        </div>
    );
};

export default Home;

The output: