Not able to set data to expandable list in react native

Question

I have an expandable section list in my App and I need to populate values in it from two different api calls. In this link the sample is populated from a local variable. Also I noticed that the data should be like:

const MockData = [
        ...
        {
            header: 'sectionHeader',
            member: [
            ...
                {
                    title: 'memberTitle',
                    content: 'content',
                },
            ...
            ]
        },
        ...
    ]

I parsed my responses from two apis into above mentioned format. and saved the value in state variable. if I set this sate variable value to expandable list it shows error. If suppose I print the state variable value with console.log() and copy that value and save it to a local variable and the use that variable to populate the expandable list it works. I know this sound so confusing. I copied the value from console to check if there was any error with the way I parse the json. Well I don't think the way I parsed is wrong. Can anybody help.

This is my render

render() {
  if (this.state.hasData) {


var data = this.state.processedData;
console.log("return");
console.log(data);

return (

     <ExpandableList
      dataSource={this.state.processedData}
      headerKey="title"
      memberKey="member"
      renderSectionHeaderX={this._renderHeader}
      renderRow={this._renderRow}

    /> 

);
  } else {
    return <ActivityIndicator style={{ flex: 1 }} />
   }

}

Any help would be appreciated

Thanks in advance.

EDIT 1.

In most samples of expandable list the list is populated from local storage. Am populating the list from state variable . Is that a issue

EDIT 2.

This is how I parse my two apis into required format

    processList =() =>{
console.log("ProcessList");
var students = this.state.data;
var stuLength = students.length;
var tempStuLength = 0;

var main = "[";
this.state.data.map((userData) => {
  tempStuLength = tempStuLength + 1;

  var title = '{ title: {' + 'StudentName: ' + JSON.stringify(userData.StudentName ) +', ' + 'studentId:' + JSON.stringify( userData.StudentID )+  ', '+ 'name:' +  JSON.stringify(userData.StudentName) +  ', ' + 'parentName:' +   JSON.stringify(userData.FatherName) +   ', ' + 'dob:' +  JSON.stringify(userData.DOB) +   ', ' + 'image:' +  JSON.stringify(userData.CivilID) +  '},';
  var member = 'member: ['
  var tempFee = this.state.feesDetails
  var feeLength = tempFee.length;
  var tempCount = 0;

  this.state.feesDetails .map((fees) =>{


    if( userData.StudentName === fees.StudentName){
      tempCount = tempCount + 1;
      if (tempCount !== 1){
        member = member.concat(",")
      }
    var feeItem = '{  title:' +  JSON.stringify(fees.StudentName )+  ', date:' +  JSON.stringify(fees.FeeDueDate) +  ', type:' +   JSON.stringify(fees.FeeDescription) +  ', amount:' +   JSON.stringify(fees.FeeAmount) +   '}'

     member = member.concat( feeItem);
    }

  });
  tempCount == 0;
   member = member.concat("] }");
   if(tempStuLength !== stuLength){
    member = member.concat(",")

   }

  title = title.concat(member);

  main = main.concat(title);


  });
  main = main.concat("]");
  console.log(" $$$$$$$$$ ");
  console.log(main);
  console.log(" $$$$$$$$$ ");
  this.setState({
    processedData : JSON.stringify(main),
    hasData : true
  });


  };

Currently am having this error when trying to set the parsed data from state variable. Any idea ...??

TypeError: TypeError: TypeError: Requested keys of a value that is not an object.

Answer 1

MockData.testData should be the custom array which you created from the 2 API calls. Once it is formed do call setState. Then it should work.

render() {
  return (
    MockData.testData.length > 0 ?
    <ExpandableList
      dataSource={MockData.testData}
      headerKey="title"
      memberKey="member"
      renderSectionHeaderX={this._renderHeader}
      renderRow={this._renderRow}

    />
    :
    <ActivityIndicator style={{ flex: 1 }} />
  );
}