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?
return is missing:
suppliers.map((supplier)=> {
return <tr>
<td>
{supplier.sup_Id}
</td>
<td>
{supplier.sup_ShortCode}
</td>
</tr>
})
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.