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> ); } }