ReactJS中的数据过滤

Question

感谢您提前提供的帮助。作为学习反应的一部分，我试图显示通过表格输入的项目列表。我能够显示这些项目。但我有一个年份过滤器。也就是说，我想显示属于相应年份的数据。由于我是新手，所以我没能做到这一点。当我在谷歌上搜索时，我得到了过滤器的概念。但我不明白该如何实施。有人能帮我解决这个问题吗。反应代码添加在下面提供的链接中

https://codesandbox.io/s/expense-tracker-047z67

Answer 1

在ExpensesList.js文件中添加filteredData函数，并传递.map函数filteredData而不是props.listDatas就像下面的代码

import React, { useState } from "react";
import ExpenseItem from "./ExpenseItem/ExpenseItem";
import ExpenseDateFilter from "./ExpenseDateFilter/ExpenseDateFilter";
import "./ExpenseList.css";

const ExpenseList = (props) => {
const [currentSelectedyr, setCurrentSelectedyr] = useState("2020");
const yearSelected = (year) => {
setCurrentSelectedyr(year);
};

const filteredData = props.listDatas.filter((item) => {
return item.date.split("-")[0] === currentSelectedyr;
});

return (
<div className="expenses">
<ExpenseDateFilter selectedYear={yearSelected} />
{filteredData.map((data, key) => (
<ExpenseItem expenseInfos={data} key={key} />
))}
</div>
);
};

export default ExpenseList;