How to render API data into React Frontend using functional components?

I have successfully created a backend API using Node+Express+MSSQL and tested out the routes using POSTMAN. Now the challenging part is when I try to render the data to front-end using React Functional components/hooks I get some errors. I’m not sure if this is the correct way to render the tags to React page using API. Also I made sure not to have duplicate ID’s in my table cause that might cause some more errors and it is a unique field that can use from ‘KEY’ prop.

Following is the React Code trying to get the output

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import '../App.css';

const Ctms = (props) => {

const url = 'http://localhost:8090/api/ctms'
const [normac, setNormac] = useState()

useEffect(() => {
axios.get(url)
.then(response => {
console.log(response.data)
setNormac(response.data)
})

}, [url]);

if(normac) {

    return(
    <div>
    {normac.map((ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) => (
    
    <div key ={ID.value}>
    
    <p key ={ID.value}>Shop Order : {shop_order.value}</p>
    <p key ={ID.value}>Item Number : {item_number.value}</p>
    <p key ={ID.value}>Item Desc : {item_desc.value}</p>
    <p key ={ID.value}>Machine : {machine.value}</p>
    <p key ={ID.value}>Supplier : {supplier.value}</p>
    <p key ={ID.value}>Feet Coil : {feet_coil.value}</p>
    <p key ={ID.value}>Date On : {Date_on.value}</p>
    <p key ={ID.value}>Load Number : {load_no.value}</p>
    <p key ={ID.value}>Load PC Signoff : {loadpc_signoff.value}</p>
    <p key ={ID.value}>PC Staff Load : {pc_staff_load.value}</p>
    <p key ={ID.value}>Unload PC Signoff : {unloadpc_signoff.value}</p>
    <p key ={ID.value}>PC Staff Unload : {pc_staff_unload.value}</p>
    <p key ={ID.value}>Date Off : {Date_off.value}</p>
    <p key ={ID.value}>CTMS ID : {ctms_id.value}</p>
    <p key ={ID.value}>Complete : {complete.value}</p>
    
    </div>
    
    ))}
    </div>
    )}
    
return (
<h1>Check the KepServer tags!!!</h1>
)
}

export default Ctms;

Sample DB Fiddle

CREATE TABLE ctms (
    ID INT,
    shop_order NCHAR(20),
    item_number NCHAR(20),
    item_desc NCHAR(50),
    machine NCHAR(10),
    supplier NCHAR(20),
    feet_coil NCHAR(10),
    Date_on NCHAR(10),
    load_no NCHAR(15),
    loadpc_signoff NCHAR(10),
    pc_staff_load NCHAR(10),
    unloadpc_signoff NCHAR(10),
    pc_staff_unload NCHAR(15),
    Date_off NCHAR(10),
    ctms_id NCHAR(15),
    complete NCHAR(10)
);
    

INSERT INTO ctms (ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) VALUES (1,'SO  123456','0345678945','5/8X022 3T PREM COIL','NOR3','SPOTHER','1000','20220505','LOAD1','INSPECTED','AGLENN','INSPECTED','AGLENN','05/06/2022','ctms379669','y');

INSERT INTO ctms (ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) VALUES (1,'SO  456789','0345678945','5/8X022 3T PREM COIL','NOR3','SPOTHER','1000','20220505','LOAD1','INSPECTED','AGLENN','INSPECTED','AGLENN','05/06/2022','ctms379670','y');

INSERT INTO ctms (ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) VALUES (1,'SO  987654','0345678945','5/8X022 3T PREM COIL','NOR3','SPOTHER','1000','20220505','LOAD1','INSPECTED','AGLENN','INSPECTED','AGLENN','05/06/2022','ctms379671','y');

INSERT INTO ctms (ID,shop_order,item_number,item_desc,machine,supplier,feet_coil,Date_on,load_no,loadpc_signoff,pc_staff_load,unloadpc_signoff,pc_staff_unload,Date_off,ctms_id,complete) VALUES (1,'SO  654321','0345678945','5/8X022 3T PREM COIL','NOR3','SPOTHER','1000','20220505','LOAD1','INSPECTED','AGLENN','INSPECTED','AGLENN','05/06/2022','ctms379672','y');

Errors I’m getting (Reference for the errors)

• Uncaught TypeError: Cannot read properties of undefined (reading ‘value’)
• The above error occurred in the component

>Solution :

Your map is not quite right, and there are few things in the JSX that need fixing.

Give this a shot.

{normac.map(x => (

<div key ={ID}>

<p>Shop Order : {x.shop_order}</p>
<p>Item Number : {x.item_number}</p>
<p>Item Desc : {x.item_desc}</p>
<p>Machine : {x.machine}</p>
<p>Supplier : {x.supplier}</p>
<p>Feet Coil : {x.feet_coil}</p>
<p>Date On : {x.Date_on}</p>
<p>Load Number : {x.load_no}</p>
<p>Load PC Signoff : {x.loadpc_signoff}</p>
<p>PC Staff Load : {x.pc_staff_load}</p>
<p>Unload PC Signoff : {x.unloadpc_signoff}</p>
<p>PC Staff Unload : {x.pc_staff_unload}</p>
<p>Date Off : {x.Date_off}</p>
<p>CTMS ID : {x.ctms_id}</p>
<p>Complete : {x.complete}</p>

</div>

))}

Now you have x (as a reference to the current item in the array iteration) that you can reference within the map body. Here x will have properties that correspond to the properties of the objects within normac which, presumably, correspond to the column names in your db.

Note, you also don’t need to have a key on anything but the top level element in a loop, so you only need it on the <div>.