ReactJs - Not able to map data to table rows and columns

Question

I have json array which I get on calling api -

[{"sup_Id":6,"sup_ShortCode":"A"},{"sup_Id":7,"sup_ShortCode":"B"},{"sup_Id":8,"sup_ShortCode":"C"},{"sup_Id":1000,"sup_ShortCode":"D"}]

React component reading this array as -

import React,{useEffect,useState} from 'react'
import axios from 'axios';
function AllSuppliers() {
    const [suppliers, setstate] = useState([])
    useEffect(() => {
        // GET request using axios inside useEffect React hook
        axios.get('http://localhost:62815/api/values/GetAllSuppliers')
            .then(x => setstate(x.data))
            .catch(error => {
                alert(error);
                
            });;
    }, []);
    return (
        <>
            <table style={{width: '50%'}}>
            <thead>
                <tr>
                <th>
                    Supplier Id
                </th>
                <th>
                    Supplier Name
                </th>
                
                </tr>
                </thead>
                
                {
                    suppliers.map((supplier)=>{
                        <tr>
                            <td>
                            {supplier.sup_Id}
                            </td>
                            <td>
                            {supplier.sup_ShortCode}
                            </td>
                        </tr>
                    })
                }
               
            </table>
        </>
    )
}

export default AllSuppliers

But I get output as -

Json array does not gget bind inside table. What could be the issue?

Answer 1

The fix should be this:

                    suppliers.map((supplier)=>{
                    return(
                        <tr>
                            <td>
                                {supplier.sup_Id}
                            </td>
                            <td>
                                 {supplier.sup_ShortCode}
                            </td>
                        </tr>
                        )
                })

If this doesn't fix the issue then it is todo with the retrieval of the data.

Answer 2

return is missing:

suppliers.map((supplier)=> {
    return <tr>
        <td>
        {supplier.sup_Id}
        </td>
        <td>
        {supplier.sup_ShortCode}
        </td>
    </tr>
})