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

Question

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

Answer 1

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> .

In response to the question in your comment, if you want to only work with a single record then you would either need to 1) filter the data returned from the db/api to a single row/entity, or 2) reference only a single item within normac instead of mapping through the array. Something like

{normac.length > 0 && (

<div key={normac[0].ID}>

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

</div>

))}

Here, normac.length does a quick truthy check that there is something in the array to reference before actually trying to reference it. Without it you're likely to run into issues trying to reading a property of undefined while your data is loading async from the api in your useEffect . You will need to adjust that truthy check depending on which element in the array you want to reference.

If you want to work with some of the array values then you can go back to normac.map() but filter the array first:

normac.filter(x => x.ID > 1).map(x => ({<div>...</div>});

Answer 2

As I understand the normac is a array of object

When you are using .map method you have access to .map((el, index, array) => ...)

to get the variables you want (ID,shop_order,item_number...) you need to destructure the first argument of the map callback:

.map(({ ID,shop_order,item_number... }) => ...)