how to display two sharepoint list data separately in react?

Question

my requirement is i have to display 4 list separately under collapsable panel but the problem is, I am not able to segregate the list , is there any way? help me.

export interface IMyWorkListState {
  items: [
    {
      "Title": "",
      "Due_x0020_Date": "",
      "Status": "",

    }]
  ,

}

export default class MyWorkList extends React.Component<IMyWorkListProps, IMyWorkListState>  {
  count: number = 1;
  flag: boolean = true;

  public constructor(props: IMyWorkListProps, state: IMyWorkListState) {

    super(props);

    this.state = {

      items: [

        {

          "Title": "",
          "Due_x0020_Date": "",
          "Status": "",

        }

      ]

    };

  }


  public componentDidMount() {


    var reactHandler = this;
    var listname = ["Asset Approval", "RemoteLists", "testList", "documentList"];

    var i = 0;
    var itemArrays = [];
    var Listitemcount = [];
    var feedPromises = [];
    for (let index = 0; index < listname.length; index++) {
      //start the process to get all the feeds and save their ajax promises into an array
      feedPromises.push(getListData(listname[index]));
    }
    function getListData(ListName) {

      //alert("getfeed ")
      return jquery.ajax({
        url: reactHandler.props.siteUrl + "/_api/web/lists/getbytitle('" + ListName + "')/items",

        type: "GET",

        headers: { 'Accept': 'application/json; odata=verbose;' },

        success: function (resultData) {

          itemArrays[i] = resultData.d.results;

          ++i;

        },

        error: function (jqXHR, textStatus, errorThrown) {

        }
      });
    }
    var listData;
    var flag = true;
    // wait until all the feeds return data to continue
    jquery.when.apply(this, feedPromises)
      .done(function () {
        // when all the data calls are successful you can access the data via

        for (let index = 0; index < listname.length; index++) {
          if (flag) {
            listData = itemArrays[index]
            flag = false;
          } else {
            listData = listData.concat(itemArrays[index])
          }


        }
        reactHandler.setState({

          items: listData

        });

        //this.OlistData=listData
      });
  }

public render(): React.ReactElement<IMyWorkListProps> {

return (

  <div className="container-fluid">

    <div className={styles.tableCaptionStyle} >Dashboard MyWorkList  </div>

    <Collapsible trigger="Start here"   >

      <table className="table table-hover"   >
        <thead>
          <tr>

            <th>Title</th>
            <th>Due Date</th>
            <th>Status</th>
          </tr>
        </thead>

        {this.state.items.map(function (item, key) {


          return (<tbody key={key}>

            <tr>

              <td>{item.Title}</td>
              <td>{item.Due_x0020_Date}</td>
              <td>{item.Status}</td>
            </tr>

          </tbody>);

        })}

      </table>

    </Collapsible>


  </div>

);

}
}

Answer 1

First Add you multiple lists using your own answer: Get data from multiple lists using REST API

Then use listData (I don't think items will hold List state based on it's constructor definition) and for each list in the lists create a variable to hold the new list you need:

let assetApprovals = listData.filter(l => l === "Asset Approval"); and do the same for the rest of the lists.

Then as @efkah said map and chop them up in collapsibles:

//for the first one do this
//=========================
public render(): React.ReactElement<IMyWorkListProps> {
let aa = assetApprovals .map(function(item, i) {
    if(item.title != null && item.title.length > 0){

      return   <TableRow key={i} value={item}>
      <TableRowColumn>
                        <br />Only column: {item}  
      </TableRowColumn>
    </TableRow>;        
  }
  }.bind(this));

return (
<Collapsible trigger="Start here"   >

     <table className="table table-hover"   >
        <thead>
          <tr>
            <th>My one and only assumed column</th>
          </tr>
        </thead>
<tbody key={key}>
            <tr>
            {aa}
            </tr>
          </tbody>
      </table>
    </Collapsible>
)

}

NOTE: Also be careful as it appears you're pulling in Lists...which normally are in table format. Then you're trying to add this List (of table format) of which we do not know the format of into another format:

reactHandler.setState({items: listData });

By doing this you're trying to append any format that any of your list/s may have into this object format:

          "Title": "",
          "Due_x0020_Date": "",
          "Status": "",

If they do each have that format then you're fine else...not.