Im stuck.

I need to make an API call and then again need to make another API call but with the data collected from the first one.

It work only for me if: Enter to my page -> go to vsc -> update code - for example add // somewhere and it's only thing that works.

Callbacks doesn't work or I'm just stupid :C

Is there possibility to do that synchronously?

import './App.css';

import A from './Components/A.js';
import React from 'react';

export class App extends React.Component {
    state = {
        a: {}
      };

      componentDidMount() {
        this.GetA();
      }
    
        GetA() {
        fetch("https://localhost:7138/Api/A/GetAll")
          .then((res) => res.json())
          .then((json) => this.setState( a => {return {a : json}}));
      }

    render() {
        return (
            <div>
                <A data={this.state.a}/>
            </div>
        )
    };
}

//

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.js";


export class A extends React.Component {
  state = {
    b: {}
  };

  componentDidMount() {
    this.GetB();//
  }

  GetB() {
    let entity = [];
    if (
      Object.keys(this.props.data).length !== 0 &&
      Object.keys(this.state.b).length === 0
    ) {
      this.props.data.map((o) =>
        fetch("https://localhost:7138/Api/Sygnature/GetSpecific", {
          method: "POST",
          body: JSON.stringify(o),
          headers: {
            "Content-Type": "application/json; charset=utf-8",
          },
        })
          .then((res) => res.json())
          .then((json) => {
            if (json !== undefined && json !== null) {
              json.map((x) => {
                entity.push(x);
              });
            }
          })
      );
      this.setState({ b: entity });
    }
  }

  render() {
    return (
      <div className="d-flex">
        <ul className="nav nav-tabs navbar-light bg-light">
          {Array.from(this.props.data).map((d) => (
            <li className="nav-item" id={d.id} key={d.name + d.id}>
              <a
                className="nav-link"
                data-bs-toggle="tab"
                href={"#" + d.name}
                style={{ textTransform: "uppercase", fontWeight: "bold" }}
              >
                {d.name}
              </a>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

export default A;