Hi I am calling an API using axios. it is returning data. that data I am using to populate a table. but it is giving error.

  const [response, setResponse] = useState([]);
  const [flag, setFlag] = useState(false);

await axios.get(`http://localhost:3000/api/certificates?page=${page}`,{
              params: param,
          }).then(res=>{
             console.log(res.data);
             setResponse(res.data);
             setFlag(true);
          })

then I am using response into table to populate data. table will be populated only if flag become true.

<div className="col-md-10 container">
          { flag && (
                <table className="table table-bordered ">
                  <tbody>
                    { flag && response.map((certificate: Certificate, index: number) => (
                      <tr>
                      <td>{certificate.certifcateNo}</td>
                      <td>{certificate.protoCOlNo}</td>
                      </tr>
                      }
                  </tbody>
                </table>
         </div>

My API is returning below output from postman

{
    "data": [
        {
            "id": "cace4b0c-2836-412a-be60-78f726917ff6",
            "createdAt": "2021-12-03T21:06:14.540Z",
            "modifiedAt": "2021-12-03T21:06:14.540Z",
            "deletedAt": null,
            "certificateNo": 1,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        },
        {
            "id": "91dfa4e3-d7f7-4671-b3e3-ba90c6454a1a",
            "createdAt": "2021-12-03T21:06:22.690Z",
            "modifiedAt": "2021-12-03T21:06:22.690Z",
            "deletedAt": null,
            "certificateNo": 2,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        },
        {
            "id": "c84d7bce-cdcb-4984-89a2-ad2291651867",
            "createdAt": "2021-12-03T21:06:23.398Z",
            "modifiedAt": "2021-12-03T21:06:23.398Z",
            "deletedAt": null,
            "certificateNo": 3,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        },
        {
            "id": "0755d2f9-50df-4b5a-a863-d173a12b45b5",
            "createdAt": "2021-12-03T21:06:23.762Z",
            "modifiedAt": "2021-12-03T21:06:23.762Z",
            "deletedAt": null,
            "certificateNo": 4,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        },
        {
            "id": "05c1ce23-eaf6-4ff9-aa5c-5f0554a22205",
            "createdAt": "2021-12-03T21:06:24.032Z",
            "modifiedAt": "2021-12-03T21:06:24.032Z",
            "deletedAt": null,
            "certificateNo": 5,
            "requestStatus": "DRAFT",
            "sponser": "Onkar",
            "address": "JBP",
            "address2": "BUSINESS BAY",
            "zipCode": "40013",
            "city": "MH",
            "protoColNo": "123",
            "molecules": "Shweta",
            "unAuthMolecule": "NO",
            "phaseOfTrial": 1,
            "noOfSubjects": "5",
            "startDate": "2011-11-09",
            "endDate": "2012-11-09",
            "personInCharge": "Deepali",
            "country": "India",
            "comments": "I am Genius",
            "attachedFile": "string"
        }
    ],
    "meta": {
        "total": 16,
        "page": "1",
        "last_page": 4
    }
}

what mistake I am doing?

CodePudding user response：

const {data} = await axios.get(`http://localhost:3000/api/certificates?page=${page}`,{
              params: param,
          })
       console.log(data.data);
       setResponse(data.data);
        setFlag(true);
        

CodePudding user response：

Idk if you just wrote your code too quickly, but you are missing closing parentheses.

{ flag && response.map((certificate: Certificate, index: number) => (
  <tr>
     <td>{certificate.certifcateNo}</td>
     <td>{certificate.protoCOlNo}</td>
  </tr>
))} <-- here