doubt

index.js ------------

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {applyPolyfills, defineCustomElements} from 'h8k-components/loader';

const ARTICLES = [
  {
    title: "A message to our customers",
    upvotes: 12,
    date: "2020-01-24",
  },
  {
    title: "Alphabet earnings",
    upvotes: 22,
    date: "2019-11-23",
  },
  {
    title: "Artificial Mountains",
    upvotes: 2,
    date: "2019-11-22",
  },
  {
    title: "Scaling to 100k Users",
    upvotes: 72,
    date: "2019-01-21",
  },
  {
    title: "the Emu War",
    upvotes: 24,
    date: "2019-10-21",
  },
  {
    title: "What's SAP",
    upvotes: 1,
    date: "2019-11-21",
  },
  {
    title: "Simple text editor has 15k monthly users",
    upvotes: 7,
    date: "2010-12-31",
  },
];

ReactDOM.render(<App articles={ARTICLES} />, document.getElementById('root'));
registerServiceWorker();

applyPolyfills().then(() => {
    defineCustomElements(window);
})

app.js-------------------

import React, { useState, useEffect } from 'react';
import './App.css';
import 'h8k-components';

import Articles from './components/Articles';

const title = "Sorting Articles";

function App({articles}) {
// const [newArticle,setNewArticle] = useState(articles)
let newArticle = articles
newArticle.sort((a,b)=>b.upvotes - a.upvotes)
const upvoted = () =>{
  let newData = newArticle.sort((a,b)=>b.upvotes - a.upvotes)
  // setNewArticle(newData)
  console.log(newArticle)
}
const recent = () =>{
  newArticle.sort((a,b)=>new Date(b.date) - new Date(a.date))
  // setNewArticle(newData)
  console.log(newArticle)
}

    return (
        <div className="App">
            <h8k-navbar header={title}></h8k-navbar>
            <div className="layout-row align-items-center justify-content-center my-20 navigation">
                <label className="form-hint mb-0 text-uppercase font-weight-light">Sort By</label>
                <button onClick={upvoted} data-testid="most-upvoted-link" className="small">Most Upvoted</button>
                <button onClick={recent} data-testid="most-recent-link" className="small">Most Recent</button>
            </div>
            <Articles articles={newArticle}/>
        </div>
    );

}

export default App;

articles------------------

import React from 'react';

function Articles({articles}) {
    return (
        <div className="card w-50 mx-auto">
            <table>
                <thead>
                <tr>
                    <th>Title</th>
                    <th>Upvotes</th>
                    <th>Date</th>
                </tr>
                </thead>
                <tbody>
                {articles.map((item)=>(

                 <tr data-testid="article" key="article-index">
                    <td data-testid="article-title">{item.title}</td>
                    <td data-testid="article-upvotes">{item.upvotes}</td>
                    <td data-testid="article-date">{item.date}</td>
                </tr>
                ))}
                </tbody>
            </table>
        </div>
    );

}

export default Articles;