I have cards that render it from an api that has many objs including date and I wane to render the cards based on recent dates ... What I need is to sort based on recent dates using react

snippets of code also a link that works https://codesandbox.io/s/sleepy-glitter-ru6dvu?file=/src/App.js:166-207

my api https://api.npoint.io/d275425a434e02acf2f7

              {  filteredDate && filteredCat?.map((list) => {
               
                
                if (list.showOnHomepage === "yes") {
                  const date = format(
                    new Date(list.publishedDate),
                    "EEE dd MMM yyyy"
                  );
                  const showCat = news.map((getid) => {
                    if (getid.id == list.categoryID) return getid.name;
                  });
                  //  const rec = list.publishedDate.sort((date1, date2) => date1 - date2);

                  return (
                    <Card
                      className=" extraCard col-lg-3"
                      style={{ width: "" }}
                      id={list.categoryID}
                    >
                      <Card.Img
                        variant="top"
                        src={list.urlToImage}
                        alt="Image"
                      />
                      <Card.Body>
                        <Card.Title className="textTitle">
                          {list.title}
                        </Card.Title>
                        <Card.Text></Card.Text>
                        <small className="text-muted d-flex">
                          <FaRegCalendarAlt
                            className="m-1"
                            style={{ color: "#0aceff" }}
                          />
                          {date}
                        </small>

                        <div
                          style={{ color: "#0aceff" }}
                          className="d-flex justify-content-between"
                        >
                          <Button variant="" className={classes["btn-cat"]}>
                            {showCat}
                          </Button>
                          <div>
                            <FaRegHeart />
                            <p>
                              <FaLink />
                             <BrowserRouter>
                             {/* <Link to='./Newsitem.js'>
                                {''}
                              <button
                                
                
                              >Close</button>
                              </Link> */}
                             
                             </BrowserRouter>
                              {/* <button
                                onClick={() =>
                                  window.open("/src/components/News/Newsitem")
                                }
                              >
                                Go to another
                              </button> */}
                              <a
                                href="/Newsitem"
                                target="/src/components/News/Newsitem"
                                rel="noopener noreferrer"
                              >
                               
                                <button >Go to another page</button>
                              </a>
                            </p>
                          </div>
                        </div>
                      </Card.Body>
                    </Card>
                  );
                }
              })}
            </div>
          }
        </div>

CodePudding user response：

1. use a state for you data which is coming from the server.

2. When getting the data, sort the News based on the publishedDate.

3. Set your state value.

4. Use your state value to render your UI.

Hope it helps:

const [news, setNews] = useState([]);

const fetchNews = () => {
    fetch("https://api.npoint.io/d275425a434e02acf2f7").then((response) => response.json()).then((data) => {
        const sortedNews = data.News.sort(function(a, b) {
            const firstPublishedDate = new Date(a.publishedDate);
            const secondPublishedDate = new Date(b.publishedDate);
            return firstPublishedDate.getTime() - secondPublishedDate.getTime();
        });
        setNews(sortedNews);
    }).catch((error) => {
        console.log(error);
    });
};

useEffect(() => {
    fetchNews();
}, []);

return (
    <div>
        {
            news.map((newsItem) => {
                return (
                    ...
                );
            })
        }
    </div>
);

CodePudding user response：

You can sort your News data in, for example, the fetchDataList call as shown below. This will sort starting from most recent articles at the top.

const fetchDataList = () => {
    setIsLoading(true);

    return fetch("https://api.npoint.io/d275425a434e02acf2f7")
        .then((response) => response.json())
        .then((data) => {
            // sort news 
            data.News.sort(function(x, y) {
                if (x.publishedDate > y.publishedDate) {
                    return -1;
                }
                if (x.publishedDate < y.publishedDate) {
                    return 1;
                }
                return 0;
            });
            // **************
            setLists(data.News);
            setIsLoading(false);
        });
};

Here is a working snippet showing all of the API articles sorted:

https://codesandbox.io/s/musing-pond-0fr7jk