如果是“null”或“undefined”，则不要在 React js 中显示表格

Question

here is the code which displaying the all the data i have to put check if body contains nulll then dont display table.Currently it displaying the empty table.but that empty table shouldnt be visible.any help would be apprecited

  {logs &&
    logs.map((log) => {
      if (
        log.body === "null" ||
        log.body === "undefined" ||
        log.body === ""
      ) {
        console.log("empty body");
      } else {
        return (
          <Table striped bordered hover>
            <thead>
              <tr>
                <th>Parameter</th>
                <th>
                  Value <CButton onClick={handleShow}>View</CButton>
                </th>
              </tr>
            </thead>
            <tbody>
              {log.body &&
                Object.keys(log.body).map((key) => ( 
                  <tr key={key}>
                    <td>{key}</td>
                    <td>{JSON.stringify(log.body[key])}</td>
                  </tr>
                ))}
            </tbody>
          </Table>
        );
      }
    })}

And here is the API.

[
    {
        "id": 1,
        "body": {
            "buy_WBNB": 0.1231,
            "sell_WBNB": 0.1541, 
            "expected_profit": -42.27542384981283,  
        },
        "response": "CONNECTION ERROR: The connection got closed with the close code `4040`",
        "created_at": "Feb 28, 2022 11:57 AM"
    },
    {
        "id": 2011,
        "body": null,
        "response": "connection not open on send()",
        "created_at": "Feb 28, 2022 5:49 PM"
    }, 
]

Answer 1

check first log.body exist

{logs &&
    logs.map((log) =>
    log.body && Object.keys(log.body).map((key) => (
        <tr key={key}>
          <td>{key}</td>
          <td>{JSON.stringify(log.body[key])}</td>
        </tr>
      ))
    )}

output will look like: