使用按钮过滤对象数组

Question

React newbie here is asking for some help. Here is the deal: I have an array of 4 objects (in my Data.js file) and, after clicking on a button, I want to display only the items belonging to "category A" in my example below. I'm a bit confused with the use of setState (which I assume I would need since my button will "update" the initial state to only reflect the data I want to display (hence item 1 and 4). Any ideas how it can be done? Cheers!

index.js

import React, {Component} from "react";
import ReactDOM from "react-dom";
import Data from "./Data.js";



class Root extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: Data,
        }
    }

myFunctionA = () => {
    // filtering in here
}
    
render() {
        return (
            <div>
                <button onClick={this.myFunctionA}>Click me to display item 1 & 4</button>
            </div>
            
        )
    }
}

ReactDOM.render(<Root />, document.getElementById("root"))

Data.js

const Data = [
  {
    "id": 1,
    "name": "First item",
    "category": "A"
  },
  {
    "id": 2,
    "name": "Second item",
    "category": "B"
  },
  {
    "id": 3,
    "name": "Third item",
    "category": "C"
  },
  {
    "id": 4,
    "name": "Fourth item",
    "category": "A"
  },
]

export default Data

Answer 1

You're right, you need to use setState.

Try something like that:

myFunctionA = () => {
    const filteredData = this.state.items.filter(elem => elem.category === 'A');
    this.setState({ items: filteredData });
}