React data table using json data - json

Question

import React from "react";
import {
Button,
Form,
FormGroup,
Label,
Input,
FormText,
Row
} from "reactstrap";
import Icon from "react-icons-kit";
import { filter } from "react-icons-kit/fa/filter";
import { pencil, bin, search } from "react-icons-kit/icomoon";
import { ic_delete, ic_create } from "react-icons-kit/md";
import { Link } from "react-router-dom";
import { activeStyle } from "../projects/Projects.css";
import {
orange,
contentStyle,
displayContainer,
pageHeading,
hrStyle,
buttonStyle,
floatRight1,
exampletable,
savebtn1,
bankdiv,
btnstyle
} from "../Layout.css";
import { hyperLink } from "../settings/LayoutSettings.css";
import { Header } from "../Header";
import { Footer } from "../Footer";
import $ from "jquery";
var result = [];
var URL = "http://localhost:3033/";
var parsed = "";
export class ClaimList extends React.Component {
constructor() {
super();
this.state = {
data: []
};
}
componentDidMount() {
this.Claimlist();
}
Claimlist() {
alert("called");
$.ajax({
url: URL + "/ClaimList",
type: "GET",
dataType: "json",
ContentType: "application/json",
success: function(parsed) {
parsed = JSON.stringify(parsed);
console.log(parsed);
for (var x in parsed) {
result.push(parsed[x]);
}
result = $.parseJSON(parsed);
data = JSON.stringify(data);
this.setState(result);
console.log("hello ramesh");
}.bind(this),
error: function(jqXHR) {
console.log(jqXHR);
}.bind(this)
});
}
renderProducts() {
return this.state.result.map(product => {
return (
<tr>
<td>{product.ID}</td>
<td>{product.ExpenseName}</td>
<td>{product.Amount}</td>
</tr>
);
});
}
render() {
return (
<div>
<table>
<tbody>
{this.state.result.map(function(item, key) {
return (
<tr key={key.id}>
<td>{item.ID}</td>
<td>{item.ExpenseName}</td>
<td>{item.Amount}</td>
<td>{item.Description}</td>
</tr>
);
})}
</tbody>
</table>
<Header />
<div className={displayContainer}>
<p className={pageHeading}>Claims</p>
<hr className={hrStyle} />
<span className={floatRight1}>
<form class="form-row" method="GET">
<input type="search" placeholder="Search" />
<div
class="dropdown"
style={{ position: "relative", left: "-1vw" }}
>
<button
class="btn btn-outline-light"
type="button"
id={btnstyle}
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<Icon icon={filter} />
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item">Employee ID</a>
<a class="dropdown-item">Expense Title</a>
<a class="dropdown-item">Date</a>
<a class="dropdown-item">Amount</a>
</div>
</div>
</form>
</span>
<table class="table table-bordered table-striped table-responsive-md">
<thead>
<tr className={orange}>
<th>Employee ID</th>
<th>Employee Name</th>
<th>Expense Title</th>
<th>Description</th>
<th>Amount</th>
<th>Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{/* {this.MyTableGrid()} */}
{this.renderProducts()}
</tbody>
</table>
<div
className={bankdiv}
style={{ marginTop: "7vw", marginLeft: "-7.7vw" }}
>
<Link to="/AddClaims">
<button className="btn btn-outline-warning">Add New Claim</button>
</Link>
</div>
</div>
<Footer />
</div>
);
}
}
I'm unable to fetch the data from json and map it into the datagrid. I'm using reactjs and json to get the values from the backend(go).localhost:3033 is my go server and mysql is my database.
I'm getting an error as
Uncaught TypeError: Cannot read property 'map' of undefined

Answer 1

maybe by simply set a default value for result in your constructor that for the moment is undefined in the first render of your class :
constructor() {
super();
this.state = {
data: [],
result: []
};
}

Answer 2

Although as #Jitendra suggest, you can use JSX syntax
render() {
return {this.state.result && <Fragment> ... </Fragment>}
}

Answer 3

You needs to check inside render if this.state.result is null or not before mapping it.
render(){
if (!this.state.result)
return
else
{do other stuffs}