How to get data [closed] - reactjs

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I am working on react project, In my project I am trying to get data from backend my Api is also working fine by I am unable to display data in front end in table format. So please help me to display data in table format.
This is my code
import React, { Component } from 'react';
import './Profiles.css';
import axios from 'axios';
export default class Profiles extends Component {
constructor(props) {
super(props)
this.state = {
products: []
}
}
async getProfiles() {
try {
const res = await axios.get('http://localhost:5000/api/products');
this.setState( { products: res.data } )
} catch (error) {
console.log(error)
}
}
render() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<table className="table table-bordered">
<thead>
<tr>
<th>Brand</th>
<th>Price</th>
<th>Replacement</th>
<th>Discount</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.jobs.map(currentValue =>
<tr>
<td>{currentValue.name}</td>
<td>{currentValue.position}</td>
<td>{currentValue.location}</td>
<td>{currentValue.salary}</td>
<td>
<button className='btn btn-primary'>Edit</button>
</td>
<td>
<button className='btn btn-danger'>Delete</button>
</td>
</tr>
)}
</tbody>
</table>

Answer 1

import React, { Component } from 'react';
import './Profiles.css';
import axios from 'axios';
export default class Profiles extends Component {
constructor(props) {
super(props)
this.state = {
jobs: []
}
}
componentDidMount() {
this.getProfiles()
}
async getProfiles() {
try {
const res = await axios.get('http://localhost:7500/api/registration');
this.setState( { jobs: res.data } )
} catch (error) {
console.log(error)
}
}
render() {
return (
<div className='container'>
<div className='row'>
<div className='col-12'>
<table className="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Location</th>
<th>Salary</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
{this.state.jobs.map(currentValue =>
<tr>
<td>{currentValue.name}</td>
<td>{currentValue.position}</td>
<td>{currentValue.location}</td>
<td>{currentValue.salary}</td>
<td>
<button className='btn btn-primary'>Edit</button>
</td>
<td>
<button className='btn btn-danger'>Delete</button>
</td>
</tr>
)}
</tbody>
</table>