0

Есть такая задача - имеется главная страница блога на которой в списке выводиться несколько видов компонентов (для примера Статья, Концерт, Цитата) введите сюда описание изображения

Сейчас они выводятся неправильно, каждый своим списком:

import React from "react"

import Article from "./../Article/Article"
import articles from "./../Article/articles"

import Quate from "./../Quate/Quate"
import quates from "./../Quate/quates"

import Concert from "./../Concert/Concert"
import concerts from "./../Concert/concerts"


function BlogList(props) {

    const articleElements = articles.map((article) =>
        <li key={article.id}><Article article={article}/></li>
    );

    const quatesElements = quates.map((quate) =>

        <li key={quates.id}><Quate quate={quate}/></li>
    );

    const consertElement = concerts.map((concert) =>
        <li key={concert.id}><Concert consert={concert}/></li>
    );


    return (
        <ol className="blog_list">
            <li className="blog_list__item">
                {articleElements}
            </li>

            <li className="blog_list__item">
                {quatesElements}
            </li>

            <li className="blog_list__item">
                {consertElement}
            </li>

        </ol>
    )
}

export default BlogList

Как сделать, что б все эти компоненты были элементами одного списка и выводились по пропсу date (от новых к старым) который присутствует для всех компонентов?

date time

Мне посоветовали сначала объединить всё в один массив, потом отсортировать его методом sortby, а потом вывести через map, только пока застрял на первом пункте.

article.js

const articles = [
{
    "id":1,

    "title" :"Article title 1",
    "image":"https://via.placeholder.com/305x239",

    "addImages": [
        {
            "img1": "https://via.placeholder.com/305x239",
            "img2": "https://via.placeholder.com/305x239",
            "img3": "https://via.placeholder.com/305x239",
        }


    ],

    "shortDescription":"1A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    "description":"A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",


    "viewsNumber": 3,

    "ratings_average":4.55,
    "ratings_score":59.15,
    "ratings_users":13,


    "comments": [
        {
          "id":"c1",
          "user":"BigBoss",
          "text":"Text about article",
          "articleScore": 4,
        },
        {
            "id":"c2",
            "user":"LittleBoss",
            "text":"Text about article dsfs f",
            "articleScore": 3.4,
        },
    ],


    "tagsNumber":1,

    "date": "2016-06-09T15:03:23.000Z",

},
{
    "id":2,

    "title" :"Article title 2",
    "image":"https://via.placeholder.com/305x239",

    "addImages": [
        {
            "img1": "https://via.placeholder.com/305x239",
            "img2": "https://via.placeholder.com/305x239",
            "img3": "https://via.placeholder.com/305x239",
        }


    ],

    "shortDescription":"A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    "description":"A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",


    "viewsNumber": 2,

    "ratings_average":4.55,
    "ratings_score":59.15,
    "ratings_users":13,


    "comments": [
        {
            "id":"c123",
            "user":"BigBoss1",
            "text":"Text about article",
            "articleScore": 4,
        },
        {
            "id":"c2",
            "user":"LittleBoss",
            "text":"Text about article dsfs f 123 213",
            "articleScore": 4,
        },
    ],


    "tagsNumber":23,

    "date": "2019-01-09T15:03:23.000Z",

},
{
    "id":3,

    "title" :"Article title 3",
    "image":"https://via.placeholder.com/305x239",

    "addImages": [
        {
            "img1": "https://via.placeholder.com/305x239",
            "img2": "https://via.placeholder.com/305x239",
            "img3": "https://via.placeholder.com/305x239",
        }


    ],

    "shortDescription":"A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    "description":"A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",


    "viewsNumber": 423,

    "ratings_average":5,
    "ratings_score":50,
    "ratings_users":10,


    "comments": [
        {
            "id":"c1213",
            "user":"BigBoss12323",
            "text":"Text about article 123 23213",
            "articleScore": 4,
        },
        {
            "id":"c21",
            "user":"LittleBoss 123 312",
            "text":"Text about article dsfs f",
            "articleScore": 4,
        },
    ],


    "tagsNumber":2,

    "date": "2017-03-09T15:03:23.000Z",

},



]

export default articles

Article.js

import React from "react"

function Article(props) {

const {article} = props;


return (
    <article className="blog_post">
        <img className="blog_images__img" src={article.image} alt={article.title}/>
        <div className="blog_post__inner">
            <a href=""><h2 className="blog_post__title">{article.title}</h2></a>
            <p className="blog_post__text">{article.shortDescription}</p>
            <div className="buttons_group">
                <span className="post_watchComments">{article.viewsNumber}</span>
                <span className="post_ratingPost">{article.ratings_average}</span>
                <time className="post_time" dateTime="">{(new Date(article.date)).toDateString()}</time>
            </div>
        </div>
    </article>
)


}

export default Article

conserts.js

const concerts = [
{
    "id": 11,
    "concert_name": "2016-14-09 Booz Fest",
    "concert_date": "2017-13-09T15:04:23.000Z",
    "concert_text": "2016-14-09 Concert text",

    "image": "https://via.placeholder.com/300x230",

    "addImages": [
        {
            "img1": "https://via.placeholder.com/305x239",
            "img2": "https://via.placeholder.com/305x239",
            "img3": "https://via.placeholder.com/305x239",
        }
    ],

    "person_id": 1,
    "person_name": "Freddie Mercury",

    "band_id": 2,
    "band_name": "Queen",


    "date": "2016-14-09T15:04:23.000Z",

},
{
    "id": 21,
    "concert_name": "2016-18 Fest 2",
    "concert_date": "2016-18-09T15:04:23.000Z",
    "concert_text": "2016-18-09 Concert text",

    "image": "https://via.placeholder.com/300x230",

    "addImages": [
        {
            "img1": "https://via.placeholder.com/305x239",
            "img2": "https://via.placeholder.com/305x239",
            "img3": "https://via.placeholder.com/305x239",
        }
    ],

    "person_id": 1,
    "person_name": "Freddie Mercury",

    "band_id": 2,
    "band_name": "Queen",


    "date": "2016-18-09T15:04:23.000Z",

},
{
    "id": 22,
    "concert_name": "2016-22 Concert 3",
    "concert_date": "2016-22-09T15:04:23.000Z",
    "concert_text": "2016-14-09 Concert text",

    "image": "https://via.placeholder.com/300x230",

    "addImages": [
        {
            "img1": "https://via.placeholder.com/305x239",
            "img2": "https://via.placeholder.com/305x239",
            "img3": "https://via.placeholder.com/305x239",
        }
    ],

    "person_id": 1,
    "person_name": "Freddie Mercury",

    "band_id": 2,
    "band_name": "Queen",


    "date": "2016-22-09T15:04:23.000Z",

},


]

export default concerts

Concert.js

import React from "react"


function Concert(props) {
const {consert} = props;

return (
    <a className="blog_list__link" href="#">
        <figure className="blog_list__figure">
            <img className="blog_list__img" src={consert.image} alt={consert.concert_name}/>
            <figcaption className="blog_list__desc">{consert.concert_name}</figcaption>
        </figure>
    </a>
)
}

export default Concert

quates.js

const quates = [
{
    "id":1,
    "quate_text": "2016-13-09 If I die even tomorrow, I don't care. I managed to do absolutely everything",
    "person_id": 1,
    "person_name": "Freddie Mercury",

    "band_id" : 2,
    "band_name": "Queen",


    "date": "2016-13-09T15:04:23.000Z",

},
{
    "id":2,
    "quate_text": "2017-23-09 text 2",
    "person_id": 4,
    "person_name": "Name 2",

    "band_id" : 2,
    "band_name": "Queen",


    "date": "2017-23-09T15:04:23.000Z",

},
{
    "id":3,
    "quate_text": "2018-11-09 text 3",
    "person_id": 4,
    "person_name": "Name 2",

    "band_id" : 2,
    "band_name": "Queen",


    "date": "2018-11-09T15:04:23.000Z",

},



]

export default quates

Quate.js

import React from "react"


function Quate(props) {

const {quate} = props;

return (
    <div className="blog_quate">
        <blockquote className="blog_quate__inner" cite="autorName">
            <p>{quate.quate_text}</p>
            <p className="blog_quate__autor">{quate.person_name}<span>"{quate.band_name}"</span></p>
        </blockquote>
    </div>
)
}

export default Quate
6
  • Минус за оформление.
    – meine
    2 фев 2019 в 15:53
  • Оформил бы лучше, но с Реактом только 2-й день как знакомлюсь 2 фев 2019 в 16:40
  • Ну Вы приложите примеры своих массивов, чтобы хоть понятно стало с чем работать 2 фев 2019 в 21:44
  • Добавил. Правда не понятно, почему встроенный редактор так портит код, а как привязать файл я не нашел в stackoverflow 2 фев 2019 в 22:00
  • Я так понимаю у Вас нет ключа по которому можно определить тип новости? 2 фев 2019 в 22:00

1 ответ 1

2

Проблема Ваших данных в том что в объектах нет поля, по которому можно определить тип поста, поэтому я бы поспорил с тем кто Вам посоветовал объединять всё в один массив, так как само это объединение очень ёмкое с точки зрения производительности.

В любом случае вот решение соответствующее заявленным требованиям и формату данных. Если хотите оптимизировать то измените формат данных таким образом чтобы в объекте каждого поста был тип, например:

{
  //...
  type: "concert"
  //...
}

Решение для текущего формата данных:

const articles = [
  {
    id: 1,
    title: "Article title 1",
    image: "https://via.placeholder.com/305x239",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    shortDescription:
      "1A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    description:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    viewsNumber: 3,
    ratings_average: 4.55,
    ratings_score: 59.15,
    ratings_users: 13,
    comments: [
      {
        id: "c1",
        user: "BigBoss",
        text: "Text about article",
        articleScore: 4
      },
      {
        id: "c2",
        user: "LittleBoss",
        text: "Text about article dsfs f",
        articleScore: 3.4
      }
    ],
    tagsNumber: 1,
    date: "2016-06-09T15:03:23.000Z"
  },
  {
    id: 2,
    title: "Article title 2",
    image: "https://via.placeholder.com/305x239",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    shortDescription:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    description:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    viewsNumber: 2,
    ratings_average: 4.55,
    ratings_score: 59.15,
    ratings_users: 13,
    comments: [
      {
        id: "c123",
        user: "BigBoss1",
        text: "Text about article",
        articleScore: 4
      },
      {
        id: "c2",
        user: "LittleBoss",
        text: "Text about article dsfs f 123 213",
        articleScore: 4
      }
    ],
    tagsNumber: 23,
    date: "2019-01-09T15:03:23.000Z"
  },
  {
    id: 3,
    title: "Article title 3",
    image: "https://via.placeholder.com/305x239",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    shortDescription:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    description:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    viewsNumber: 423,
    ratings_average: 5,
    ratings_score: 50,
    ratings_users: 10,
    comments: [
      {
        id: "c1213",
        user: "BigBoss12323",
        text: "Text about article 123 23213",
        articleScore: 4
      },
      {
        id: "c21",
        user: "LittleBoss 123 312",
        text: "Text about article dsfs f",
        articleScore: 4
      }
    ],
    tagsNumber: 2,
    date: "2017-03-09T15:03:23.000Z"
  }
];

const concerts = [
  {
    id: 11,
    concert_name: "2016-14-09 Booz Fest",
    concert_date: "2017-13-09T15:04:23.000Z",
    concert_text: "2016-14-09 Concert text",
    image: "https://via.placeholder.com/300x230",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    person_id: 1,
    person_name: "Freddie Mercury",
    band_id: 2,
    band_name: "Queen",
    date: "2016-14-09T15:04:23.000Z"
  },
  {
    id: 21,
    concert_name: "2016-18 Fest 2",
    concert_date: "2016-18-09T15:04:23.000Z",
    concert_text: "2016-18-09 Concert text",
    image: "https://via.placeholder.com/300x230",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    person_id: 1,
    person_name: "Freddie Mercury",
    band_id: 2,
    band_name: "Queen",
    date: "2016-18-09T15:04:23.000Z"
  },
  {
    id: 22,
    concert_name: "2016-22 Concert 3",
    concert_date: "2016-22-09T15:04:23.000Z",
    concert_text: "2016-14-09 Concert text",
    image: "https://via.placeholder.com/300x230",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    person_id: 1,
    person_name: "Freddie Mercury",
    band_id: 2,
    band_name: "Queen",
    date: "2016-22-09T15:04:23.000Z"
  }
];

const quotes = [
  {
    id: 1,
    quote_text:
      "2016-13-09 If I die even tomorrow, I don't care. I managed to do absolutely everything",
    person_id: 1,
    person_name: "Freddie Mercury",
    band_id: 2,
    band_name: "Queen",
    date: "2016-13-09T15:04:23.000Z"
  },
  {
    id: 2,
    quote_text: "2017-23-09 text 2",
    person_id: 4,
    person_name: "Name 2",
    band_id: 2,
    band_name: "Queen",
    date: "2017-23-09T15:04:23.000Z"
  },
  {
    id: 3,
    quote_text: "2018-11-09 text 3",
    person_id: 4,
    person_name: "Name 2",
    band_id: 2,
    band_name: "Queen",
    date: "2018-11-09T15:04:23.000Z"
  }
];

const Article = (props) => {
  const { article } = props;

  return (
    <article className="blog_post">
      <img
        className="blog_images__img"
        src={article.image}
        alt={article.title}
      />
      <div className="blog_post__inner">
        <a href="">
          <h2 className="blog_post__title">{article.title}</h2>
        </a>
        <p className="blog_post__text">{article.shortDescription}</p>
        <div className="buttons_group">
          <span className="post_watchComments">{article.viewsNumber}</span>
          <span className="post_ratingPost">{article.ratings_average}</span>
          <time className="post_time" dateTime="">
            {new Date(article.date).toDateString()}
          </time>
        </div>
      </div>
    </article>
  );
}
const Concert = (props) => {
  const { concert } = props;

  return (
    <a className="blog_list__link" href="#">
      <figure className="blog_list__figure">
        <img
          className="blog_list__img"
          src={concert.image}
          alt={concert.concert_name}
        />
        <figcaption className="blog_list__desc">
          {concert.concert_name}
        </figcaption>
      </figure>
    </a>
  );
};
const Quote = (props) => {
  const { quote } = props;

  return (
    <div className="blog_quote">
      <blockquote className="blog_quote__inner" cite="autorName">
        <p>{quote.quote_text}</p>
        <p className="blog_quote__autor">
          {quote.person_name}
          <span>"{quote.band_name}"</span>
        </p>
      </blockquote>
    </div>
  );
};

const BlogList = props => {
  const blogItems = [
    ...articles.map(el => ({ ...el, type: "article" })),
    ...quotes.map(el => ({ ...el, type: "quote" })),
    ...concerts.map(el => ({ ...el, type: "concert" }))
  ].sort((a, b) => new Date(a.date) - new Date(b.date));

  return (
    <ol className="blog_list">
      {blogItems.map(blogItem => (
        <li className="blog_list__item" key={blogItem.id}>
          {blogItem.type === "article" && <Article article={blogItem} />}
          {blogItem.type === "concert" && <Concert concert={blogItem} />}
          {blogItem.type === "quote" && <Quote quote={blogItem} />}
        </li>
      ))}
    </ol>
  );
};

ReactDOM.render(<BlogList />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Решение для оптимального формата данных:

const articles = [
  {
    id: 1,
    type: "article",
    title: "Article title 1",
    image: "https://via.placeholder.com/305x239",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    shortDescription:
      "1A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    description:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    viewsNumber: 3,
    ratings_average: 4.55,
    ratings_score: 59.15,
    ratings_users: 13,
    comments: [
      {
        id: "c1",
        user: "BigBoss",
        text: "Text about article",
        articleScore: 4
      },
      {
        id: "c2",
        user: "LittleBoss",
        text: "Text about article dsfs f",
        articleScore: 3.4
      }
    ],
    tagsNumber: 1,
    date: "2016-06-09T15:03:23.000Z"
  },
  {
    id: 2,
    type: "article",
    title: "Article title 2",
    image: "https://via.placeholder.com/305x239",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    shortDescription:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    description:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    viewsNumber: 2,
    ratings_average: 4.55,
    ratings_score: 59.15,
    ratings_users: 13,
    comments: [
      {
        id: "c123",
        user: "BigBoss1",
        text: "Text about article",
        articleScore: 4
      },
      {
        id: "c2",
        user: "LittleBoss",
        text: "Text about article dsfs f 123 213",
        articleScore: 4
      }
    ],
    tagsNumber: 23,
    date: "2019-01-09T15:03:23.000Z"
  },
  {
    id: 3,
    type: "article",
    title: "Article title 3",
    image: "https://via.placeholder.com/305x239",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    shortDescription:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    description:
      "A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste,  A tittle 33 man who works with his hands is a laborer; a man whworks with hLorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam aut culpa eaque eos iustnemo neque nihil recusandae ut voluptateipsum dolor sit amet, consectonsetur adipisicing elit. Ducimunulla omnis optio pariatur, quibusdam saepe! Lorem ipsum dolor sit amet, consectetadipisicing elit. Iste, so",
    viewsNumber: 423,
    ratings_average: 5,
    ratings_score: 50,
    ratings_users: 10,
    comments: [
      {
        id: "c1213",
        user: "BigBoss12323",
        text: "Text about article 123 23213",
        articleScore: 4
      },
      {
        id: "c21",
        user: "LittleBoss 123 312",
        text: "Text about article dsfs f",
        articleScore: 4
      }
    ],
    tagsNumber: 2,
    date: "2017-03-09T15:03:23.000Z"
  }
];

const concerts = [
  {
    id: 11,
    type: "concert",
    concert_name: "2016-14-09 Booz Fest",
    concert_date: "2017-13-09T15:04:23.000Z",
    concert_text: "2016-14-09 Concert text",
    image: "https://via.placeholder.com/300x230",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    person_id: 1,
    person_name: "Freddie Mercury",
    band_id: 2,
    band_name: "Queen",
    date: "2016-14-09T15:04:23.000Z"
  },
  {
    id: 21,
    type: "concert",
    concert_name: "2016-18 Fest 2",
    concert_date: "2016-18-09T15:04:23.000Z",
    concert_text: "2016-18-09 Concert text",
    image: "https://via.placeholder.com/300x230",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    person_id: 1,
    person_name: "Freddie Mercury",
    band_id: 2,
    band_name: "Queen",
    date: "2016-18-09T15:04:23.000Z"
  },
  {
    id: 22,
    type: "concert",
    concert_name: "2016-22 Concert 3",
    concert_date: "2016-22-09T15:04:23.000Z",
    concert_text: "2016-14-09 Concert text",
    image: "https://via.placeholder.com/300x230",
    addImages: [
      {
        img1: "https://via.placeholder.com/305x239",
        img2: "https://via.placeholder.com/305x239",
        img3: "https://via.placeholder.com/305x239"
      }
    ],
    person_id: 1,
    person_name: "Freddie Mercury",
    band_id: 2,
    band_name: "Queen",
    date: "2016-22-09T15:04:23.000Z"
  }
];

const quotes = [
  {
    id: 1,
    type: "quote",
    quote_text:
      "2016-13-09 If I die even tomorrow, I don't care. I managed to do absolutely everything",
    person_id: 1,
    person_name: "Freddie Mercury",
    band_id: 2,
    band_name: "Queen",
    date: "2016-13-09T15:04:23.000Z"
  },
  {
    id: 2,
    type: "quote",
    quote_text: "2017-23-09 text 2",
    person_id: 4,
    person_name: "Name 2",
    band_id: 2,
    band_name: "Queen",
    date: "2017-23-09T15:04:23.000Z"
  },
  {
    id: 3,
    type: "quote",
    quote_text: "2018-11-09 text 3",
    person_id: 4,
    person_name: "Name 2",
    band_id: 2,
    band_name: "Queen",
    date: "2018-11-09T15:04:23.000Z"
  }
];

const Article = (props) => {
  const { article } = props;

  return (
    <article className="blog_post">
      <img
        className="blog_images__img"
        src={article.image}
        alt={article.title}
      />
      <div className="blog_post__inner">
        <a href="">
          <h2 className="blog_post__title">{article.title}</h2>
        </a>
        <p className="blog_post__text">{article.shortDescription}</p>
        <div className="buttons_group">
          <span className="post_watchComments">{article.viewsNumber}</span>
          <span className="post_ratingPost">{article.ratings_average}</span>
          <time className="post_time" dateTime="">
            {new Date(article.date).toDateString()}
          </time>
        </div>
      </div>
    </article>
  );
}
const Concert = (props) => {
  const { concert } = props;

  return (
    <a className="blog_list__link" href="#">
      <figure className="blog_list__figure">
        <img
          className="blog_list__img"
          src={concert.image}
          alt={concert.concert_name}
        />
        <figcaption className="blog_list__desc">
          {concert.concert_name}
        </figcaption>
      </figure>
    </a>
  );
};
const Quote = (props) => {
  const { quote } = props;

  return (
    <div className="blog_quote">
      <blockquote className="blog_quote__inner" cite="autorName">
        <p>{quote.quote_text}</p>
        <p className="blog_quote__autor">
          {quote.person_name}
          <span>"{quote.band_name}"</span>
        </p>
      </blockquote>
    </div>
  );
};

const BlogList = props => {
  const blogItems = [
    ...articles,
    ...quotes,
    ...concerts
  ].sort((a, b) => new Date(a.date) - new Date(b.date));

  return (
    <ol className="blog_list">
      {blogItems.map(blogItem => (
        <li className="blog_list__item" key={blogItem.id}>
          {blogItem.type === "article" && <Article article={blogItem} />}
          {blogItem.type === "concert" && <Concert concert={blogItem} />}
          {blogItem.type === "quote" && <Quote quote={blogItem} />}
        </li>
      ))}
    </ol>
  );
};

ReactDOM.render(<BlogList />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

P.S. Исправил опечатки: quOtes, conCert

8
  • Спасибо, попробовал тот вариант который считается более правильным, с присвоением типов, но к сожалению желаемого результата пока не получил. Реакт парсит страницу без ошибок в консоли, но при этом все элементы списка остаются в середине без данных, хотя их количество и сопоставимо с предоставленными данными (тоже 9 li) 3 фев 2019 в 10:00
  • 1
    Обновил ответ. Добавил воспроизводимый пример с Вашими данными. 3 фев 2019 в 12:02
  • Да, спасибо. Как-то зафтычил я в данные подбавлять type: "article", "type": "quote", "type": "concert" . Теперь выводит, и отображает. Осталось только понять почему не сортирует, как у вас в примере. Тоже [].sort((a, b) => new Date(a.date) - new Date(b.date)); прописываю, но вываливает сначала все Статьи, потом все Концерты, потом все Цытаты. 3 фев 2019 в 13:11
  • 1
    new Date("2016-13-09T15:04:23.000Z") это не валидная дата. Получается год: 2016, месяц: 13, день: 9 3 фев 2019 в 13:28
  • 1
    Понял, был не прав, взял с какого-то форума пример, потом подумал что второе число это день. Спасибо. Поменял на валидные значения, теперь как бы работает. Едиственное, что оно сначалa выводит "старые" записи в начало нумерованого списка. Но вообщем я понял принцип .sort((a, b) => new Date(b.date) - new Date(a.date)); 3 фев 2019 в 14:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.