How to display data in react? - html

Question

I have this database schema which I can get from the api when it's successful.
surveys: array of survey objects containing:
(section_id, Course_code, Course_name, Department_id)
I want to display course_code and course_name only.
here is my code:
export default function Dashboard() {
const resp=await Axios({
method:"Get",
url:'http://localhost:5000/api/student/courses',
headers:{"Content-Type":"application/json",
},
data:user,
});
const classes = useStyles();
return (
<GridContainer>
<GridItem xs={12} sm={6} md={3}>
<Card>
<CardHeader color="warning" stats icon>
<CardIcon color="warning">
<Icon>content_copy</Icon>
</CardIcon>
<p className={classes.cardCategory}>Available surveys</p>
<h3 className={classes.cardTitle}>{resp.data.survey_count}</h3>
</CardHeader>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>Available Surveys</h4>
<p className={classes.cardCategoryWhite}>
Here is the remaining courses surveys to submit
</p>
</CardHeader>
<CardBody>
<Table
tableHeaderColor="primary"
tableHead={["Course Code", "Course Name", "Survey Link"]}
tableData={[
[
//i want to map data here
],
]}
/>
</CardBody>
</Card>
</GridItem>
</GridContainer>
);
}