the info of all the fields i am getting after post need to show in the card but not displaying
componentDidMount() {
var component = this;
fetch('http://localhost:8080/UIServices/rest/dataService/getUserDetails?userName=SIVASO')
.then(function(response) {
return response.json()
}).then(function(json) {
var data = JSON.stringify(json);
var cards = [];
for (var i = 0; i < data; i++) {
cards.push(<div className="col-md-3">
<div className="panel panel-default datasource_panel">
<div className="panel-heading">
<h5 className="panel_title"><i className="fa fa-database"></i> {data[i].dataConnectionName}</h5>
<div className="panel_actions">
<ul className=" list-unstyled">
<li className="dropdown">
<a className="dropdown-toggle" data-toggle="dropdown" data-target="#">
<i className="fa fa-ellipsis-v"></i>
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)"><i className="fa fa-share-alt"></i> Share</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> Edit</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-copy"></i> Duplicate</a></li>
<li className="divider"></li>
<li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> Delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div className="panel-body">
<div className="datasource_txt text-center">
<h4>{data[i].dataConnectionType}</h4>
<h6>{data[i].dataConnectionSid}</h6>
<p>{data[i].description}</p>
</div>
</div>
</div>
</div>);
}
component.setState({
data: json
})
})
}
and In the render return {cards}
I am getting the data from service call having multiple connections I need each connection in a card. I need to loop in reactjs.
but I am not able to populate the data in the form of cards can anyone help me in this in the return I posted {cards} showing cards not defined
Instead of looping over data in componentDidMount
method, set the response data in state
variable by setState
and call a method from render method and create the cards ui inside that.
All the ui creation part should be in render
method only.
I will suggest you to use map instead of for loop
.
Write it like this:
componentDidMount() {
fetch('http://localhost:8080/UIServices/rest/dataService/getUserDetails?userName=SIVASO')
.then((response) => {
return response.json()
}).then((json) => {
this.setState({data: json})
})
}
_createCardsUI(){
let cards = [], data = this.state.data;
for (var i = 0; i < data.length; i++) {
cards.push(<div className="col-md-3">
<div className="panel panel-default datasource_panel">
<div className="panel-heading">
<h5 className="panel_title"><i className="fa fa-database"></i> {data[i].dataConnectionName}</h5>
<div className="panel_actions">
<ul className=" list-unstyled">
<li className="dropdown">
<a className="dropdown-toggle" data-toggle="dropdown" data-target="#">
<i className="fa fa-ellipsis-v"></i>
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)"><i className="fa fa-share-alt"></i> Share</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> Edit</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-copy"></i> Duplicate</a></li>
<li className="divider"></li>
<li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> Delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div className="panel-body">
<div className="datasource_txt text-center">
<h4>{data[i].dataConnectionType}</h4>
<h6>{data[i].dataConnectionSid}</h6>
<p>{data[i].description}</p>
</div>
</div>
</div></div>);
}
return cards;
}
render(){
return (
<div>
{this._createCardsUI()}
</div>
)
}
Update:
Use map instead of for loop:
_createCardsUI(){
var data = this.state.data;
return data.map(el => (
<div className="col-md-3">
<div className="panel panel-default datasource_panel">
<div className="panel-heading">
<h5 className="panel_title"><i className="fa fa-database"></i> {el.dataConnectionName}</h5>
<div className="panel_actions">
<ul className=" list-unstyled">
<li className="dropdown">
<a className="dropdown-toggle" data-toggle="dropdown" data-target="#">
<i className="fa fa-ellipsis-v"></i>
</a>
<ul className="dropdown-menu dropdown-menu-right">
<li><a href="javascript:void(0)"><i className="fa fa-share-alt"></i> Share</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> Edit</a></li>
<li><a href="javascript:void(0)"><i className="fa fa-copy"></i> Duplicate</a></li>
<li className="divider"></li>
<li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> Delete</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div className="panel-body">
<div className="datasource_txt text-center">
<h4>{el.dataConnectionType}</h4>
<h6>{el.dataConnectionSid}</h6>
<p>{el.description}</p>
</div>
</div>
</div>
</div>)
);
}
for (var i = 0; i < data; i++)
应该是for (var i = 0; i < data.length; i++)
This is a prime candidate for the use of .map
render(){
return (
<div>
{this.state.data.map((val, idx) => (
<div className="col-md-3">
... rest of card ...
</div>
))}
</div>
)
}
how to display data in card in reactjs
this.state = {
approvedCount:"",
disapprovedCount:"",
pendingCount:"",
bigChartData: "data1",
axios.get(`http://192.168.1.153:8080/vlock/poll/status`, headers, data)
// console.log("header")
.then((res) => {
// console.log("RESPONSE = ", res.data);
this.setState
console.log(res.message);
});
({ pulls: res.data });
<Card className="mb-4" style={{ color: "" }}>
<CardBody>
<br />
<center>
{" "}
<FaPoll style={{ color: "blue" }} />
</center>
<center>
{" "}
<CardTitle>Polls Approved</CardTitle>
</center>
<center>
{" "}
<p style={{ color: "blue" }}>{this.state.approvedCount}</p>
</center>
</CardBody>
</Card>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.