json manipulation use react js

you could do with Array#filter

Data.filter(a=> a.articles.length > 0).map(...

React

import React from "react";
import Data from "./data/data.json" ;


export default function post() {
  return (
        
    <div clasName = "post">
      {Data.filter(a=> a.articles.length > 0).map(post=>{
        return <div>
          <h1>{post.username} </h1>   
                     
          </div>
      })}
    </div>
  );
}

I am just answering your specific question:

How do I filter the json data like who have articles or who have articles on year 2020.

So I am going to give you a way to find all users who have articles (meaning the articles array is not empty). And I will give you a way to find all users who published articles in 2020.

Here is the code:

const have_articles = data.filter(item => item.articles.length > 0);
console.log(have_articles); //This will display all user objects who have articles

/*---------*/

const articles_in_2020 = data.filter(item => {
  const start_of_2020 = new Date('2020-01-01 00:00:00');
  const end_of_2020 = new Date('2020-12-31 23:59:59');

  return item.articles.find(art => (new Date(art.published_at) > start_of_2020 && new Date(art.published_at) < end_of_2020))
});
console.log(articles_in_2020); //This will display all user objects who have articles published in 2020

The first filter is very straightforward and I have no doubt you get it. The key to the second, the one that finds articles in 2020, are these two lines:

const start_of_2020 = new Date('2020-01-01 00:00:00');
const end_of_2020 = new Date('2020-12-31 23:59:59');

Which you can use to compare the article dates. Note that this is kinds of a dirty way to do this because it does not take into consideration your timezone.

Here is a runnable code:

const data = [
  {
    "id": 323,
    "username": "rinood30",
    "profile": {
      "full_name": "Shabrina Fauzan",
      "birthday": "1988-10-30",
      "phones": [
        "08133473821",
        "082539163912"
      ]
    },
    "articles": [
      {
        "id": 3,
        "title": "Tips Berbagi Makanan",
        "published_at": "2019-01-03T16:00:00"
      },
      {
        "id": 7,
        "title": "Cara Membakar Ikan",
        "published_at": "2019-01-07T14:00:00"
      }
    ]
  },
  {
    "id": 201,
    "username": "norisa",
    "profile": {
      "full_name": "Noor Annisa",
      "birthday": "1986-08-14",
      "phones": []
    },
    "articles": [
      {
        "id": 82,
        "title": "Cara Membuat Kue Kering",
        "published_at": "2019-10-08T11:00:00"
      },
      {
        "id": 91,
        "title": "Cara Membuat Brownies",
        "published_at": "2019-11-11T13:00:00"
      },
      {
        "id": 31,
        "title": "Cara Membuat Brownies",
        "published_at": "2019-11-11T13:00:00"
      }
    ]
  },
  {
    "id": 42,
    "username": "karina",
    "profile": {
      "full_name": "Karina Triandini",
      "birthday": "1986-04-14",
      "phones": [
        "06133929341"
      ]
    },
    "articles": []
  },
  {
    "id": 201,
    "username": "icha",
    "profile": {
      "full_name": "Annisa Rachmawaty",
      "birthday": "1987-12-30",
      "phones": []
    },
    "articles": [
      {
        "id": 39,
        "title": "Tips Berbelanja Bulan Tua",
        "published_at": "2019-04-06T07:00:00"
      },
      {
        "id": 43,
        "title": "Cara Memilih Permainan di Steam",
        "published_at": "2019-06-11T05:00:00"
      },
      {
        "id": 58,
        "title": "Cara Membuat Brownies",
        "published_at": "2020-09-12T04:00:00"
      }
    ]
  }
]

const have_articles = data.filter(item => item.articles.length > 0);
console.log(have_articles);

const articles_in_2020 = data.filter(item => {
  const start_of_2020 = new Date('2020-01-01 00:00:00');
  const end_of_2020 = new Date('2020-12-31 23:59:59');

  return item.articles.find(art => (new Date(art.published_at) > start_of_2020 && new Date(art.published_at) < end_of_2020))

});
console.log(articles_in_2020)

and this is how you write ;)

   import React from "react";
    import Data from "./data/data.json" ;
    
    
    export default function post() {
    
    const haveArticles = Data.filter(item => item.articles.length > 0);
    
    const articlesIn2020 = Data.filter(item => {
      const startOf2020 = new Date('2020-01-01');
      const endOf2020 = new Date('2020-12-31');
    
      return item.articles.find(art => (new Date(art.published_at) > startOf2020 && new Date(art.published_at) < endOf2020 ))
    });
      return (
            <div clasName = "post">
          {haveArticles.map(post=>{
            return <div>
              <h1>{post.username} </h1>   
                         
              </div>
          })}
        </div>
        <div clasName = "post">
          {articlesIn2020.map(post=>{
            return <div>
              <h1>{post.username} </h1>   
                         
              </div>
          })}
        </div>
      );
    }