How to pass an array of GET request to a table?

Question

JavaScript

The essence of the problem. It is necessary to display the data received from GET requests in the Table on the page. On a static array, which I set by hand, everything works fine, with an array from a GEt request, the table is empty. I get an array from a GET request normally, it is identical to a static array. But the data does not want to be formed. Please tell me what is the problem and how to solve it. I do everything on AIrframe

const tastDate2 = [
    {
      id: 1, 
      number: "02412",
      date: "01.01.2020",
      idstate: 'activ',
      sstatemc: 'state1',
    sstatehl: 'Состояние 1'
    },
    {
      id: 2,
      number: "53412",
      date: "21.01.2020",
      idstate: 'inactiv',
      sstatemc: 'state1',
    sstatehl: 'Состояние 1'
    }};

 let tastDate=[]

  var requestOptionsGet = {
    method: 'GET',
    credentials:'include',
    };
 
  const url0="  url "     ;

             fetch(url0, requestOptionsGet)
                 .then(response => response.json())
                 .then(result => {
                   tastDate=result.content
                                   //console.log(result)
                                   console.log(tastDate)
                                   //this.refreshData(tastDate)
                                   //this.setState({loading:false})
                                  })
                 .catch(error => {
                                  console.log('error', error)
                                  //this.setState({loading:false})
                               });
  // конец GET запроса
  //Рисуем таблицу с данными
class Tables1 extends Component {

    constructor(props) {
        super(props);
      }
    
    render () {
    //конструк для выемки даных из массива и конструирования тела таблтцы
        const newsTemplate = this.props.data.map(function(item, idx) {
      
            return (
                <React.Fragment>
                <tr key = { idx }>
                <td >{item.id}</td>
                <td>{item.number}</td>
                <td>{item.date}</td>
                <td>{item.idstate}</td>
                <td>{item.sstatemc}</td>
                <td>{item.sstatehl}</td>
              </tr>
              </React.Fragment>
            )
          })
         //рисуем таблицу. в нее вставляем тело с данными из массива
        return(
            
            <React.Fragment>
            <Container>
            <div>
                <Table>
                <thead>
                 <tr>
                <th>ID</th>
                <th>number</th>
                <th>date</th>
                <th>idstate</th>
                <th>sstatemc</th>
                <th>sstatehl</th>
                </tr>
                </thead>
              <tbody>
                {newsTemplate}
              </tbody>
                </Table>
            </div>
            </Container>
            </React.Fragment>
        )

    }
}
// отрисовываем таблицы и проводим экспорт
const Tables = () => {
    return (
      <React.Fragment>
        <p>Таблица с статичными данными, подгружаемыми из массива</p>
         <Tables1 data={tastDate2} />
         <p>Таблица с заддыми из GET запроса</p>
        <Tables1 data={tastDate} />
      </React.Fragment>
    )

  }

Answer 1

React doesn't track how variables are set directly. You need to use setState (in this case, the then fetch) and the data inside this.state.
And place the data receipt itself in componentDidMount
and, with an unspecified variable, display the loader (an inscription that is loaded) , it is
better to google about state / setState