How can i render the table from the rest api

Question

{
  "firma": {
    "serialNo": 12345,
    "companyName": "facebook",
    "email": "admin@admin",
    "bankNo": 987,
    "adress": "london",
    "faturas": [
      {
        "fid": 123,
        "updateDate": [2021, 12, 14],
        "sellDate": 1241231,
        "price": 1500
      }
    ]
  }
}

This is the json that I get from my API. And I am trying to make a frontend for the given API using React:

class UserComponents extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: []
    };
  }

  componentDidMount() {
    UserService.getFatura().then((response) => {
      this.setState({ users: response.data });
    });
  }

  render() {
    return (
      <div>
        <h2 className="text-center">Faturalar</h2>
        <div className="row">
          <table className="table table-striped table-bordered">
            <thread>
              <tr>
                <th>User serialNo</th>
                <th>User companyName</th>
                <th>User email</th>
                <th>User bankNo</th>
                <th>User adress</th>
              </tr>
            </thread>
            <tbody>
              {this.state.users.map((users) => (
                <tr key={users.serialNo}>
                  <td> {users.serialNo}</td>
                  <td> {users.companyName}</td>
                  <td> {users.email}</td>
                  <td> {users.bankNo}</td>
                  <td> {users.adress}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default UserComponents;

The problem is I cant get the faturas in my json to my table in react. I try some code but didnt work i am very new and need help in react. Please make it simple as you can. note: firma and faturas have one to many relationship serialNo is the foreign key in faturas.

Answer 1

Your data have sub-field firma . If you want print data first you must get this field.

Like this;

{this.state.users.map(({firma}) => ( // javascript can get property like this
  <tr key={firma.serialNo}>
  <td> {firma.serialNo}</td>
  <td> {firma.companyName}</td>
  <td> {firma.email}</td>
  <td> {firma.bankNo}</td>
  <td> {firma.adress}</td>
 </tr>
))}

or this;

{this.state.users.map((user) => (
  <tr key={user.firma.serialNo}>
  <td> {user.firma.serialNo}</td>
  <td> {user.firma.companyName}</td>
  <td> {user.firma.email}</td>
  <td> {user.firma.bankNo}</td>
  <td> {user.firma.adress}</td>
 </tr>
))}

If you want printing faturas, you can use this;

{this.state.users.map((user) => (
  <tr key={user.firma.serialNo}>
  <td> {user.firma.serialNo}</td>
  <td> {user.firma.companyName}</td>
  <td> {user.firma.email}</td>
  <td> {user.firma.bankNo}</td>
  <td> {user.firma.adress}</td>
  <td> {user.firma.faturas.map((fatura) => (<div>
       <p>Fatura ID : {fatura.fid}</p>
       <p>Sell Date: {fatura.sellDate}</p>
       <p>Price: {fatura.price}</p>
     </div>)
  )}</td>
 </tr>
))}