etalon_backend/themes/tps react/src/pages/News.js

// IMPORT MODULES
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import axios from "axios";
// IMPORT COMPONENTS
import Breadcrumb from "../components/Global/Breadcrumb"; 

//    TAB_1
// import RightArrowBlue from "../svg/rightArrowBlue.svg";
// import TabIMG1 from "../img/tabImg_1.jpg";


class News extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
        items: [],
        DataisLoaded: false
    };
  }
  // useEffect(() => {
  //   window.scrollTo(0, 0);
  // }, []);
  // STATE
  // const [pageIndex, setPageIndex] = useState(1);

  componentDidMount() {
    this.getTodos();
    // console.log(this.state.items);
  }

  async getTodos() {
    axios.get('http://127.0.0.1:8000/api/v1/categories/3')
      .then(res => {
        const items = res.data;
        this.setState({
                        items: items,
                        DataisLoaded: true
                    });
      })
      // console.log(this.state.items);
  }

  render() {
    const { DataisLoaded, items } = this.state;
      if (!DataisLoaded) return <div>
          <h1> Pleses wait some time.... </h1> </div> ;
    // console.log(this.state.items);
  return (
    <section className="news">
      <Breadcrumb path_1="Новости" currentUrl="./news" />;
      <div className="container">
        <div className="news-inner">
          <div className="news-tab">
            <div className="tab-header">
              <h4 className="tab-header-text" id="tab-header-text">
                Новости
              </h4>
              <div className="tab-header-line"></div>
            </div>
            <div className="tab-wrapper">

              

            { 
            items['data'][0]['posts'].map((item) => ( 


              <div className="tab" key={item.id}>
                <div className="tab-top">
                  <div>
                    <img src={ item['featured_images'][0]['path'] } alt="Turkmen carpets" />
                  </div>
                </div>
                <div className="tab-bottom">
                  <span className="tab-date">30.05.2021</span> 
                  <h2 className="tab-name">
                  { item.title }
                  </h2>
                  <div className="tab-header-link tab-link">
                    <Link to={`/blog/${item.slug}`}>
                      <span>Подробнее</span>
                      <div>
                        <img src={ item.featured_images.path } alt="RIGHTARROW" />
                      </div>
                    </Link>
                  </div>
                </div>
              </div>


              ))}

              
            </div>
          </div>
        </div>
        
      </div>
    </section>
  );
          }
};

export default News;