how to display loop data in the form of card in reactjs

Question

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> &nbsp; {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> &nbsp; Share</a></li>
                              <li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> &nbsp; Edit</a></li>
                              <li><a href="javascript:void(0)"><i className="fa fa-copy"></i> &nbsp; Duplicate</a></li>
                              <li className="divider"></li>
                              <li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> &nbsp; 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

Answer 1

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> &nbsp; {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> &nbsp; Share</a></li>
                              <li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> &nbsp; Edit</a></li>
                              <li><a href="javascript:void(0)"><i className="fa fa-copy"></i> &nbsp; Duplicate</a></li>
                              <li className="divider"></li>
                              <li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> &nbsp; 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> &nbsp; {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> &nbsp; Share</a></li>
                                  <li><a href="javascript:void(0)"><i className="fa fa-pencil"></i> &nbsp; Edit</a></li>
                                  <li><a href="javascript:void(0)"><i className="fa fa-copy"></i> &nbsp; Duplicate</a></li>
                                  <li className="divider"></li>
                                  <li><a href="javascript:void(0)"> <i className=" fa fa-trash"></i> &nbsp; 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>)
    );
}