Having Trouble Removing Item From Array in React

Question

Upon loading the page, data is retrieved from my API and stored in an array. It then displays a button for each object in the array and titles is appropriately.

What needs to happen next is when I click a button, that button disappears, and the associated item removed from the array. That part is not working. The button is registering the click, and the function is running. However the button does not disappear, and when I log the array again, the array appears to be unchanged. I cannot figure out why. Can anyone help me spot the issue?

Here is my code, the part in question is the "handleAddPolicy" function:

import React, { Component, Fragment } from 'react';
import PolicyButton from './PolicyButton/PolicyButton';

class Handbook extends Component {

    constructor(props){
        super(props);

        this.state = {
            clients: [],
            policies: [],
            client: 'Choose Client',
            logo: '',
            color1: '#000',
            color2: '#fff'
        };
        
    }

    componentDidMount() {
        fetch('/api/themes/all')
            .then(res => res.json())
            .then((result) => {
                this.setState({ clients: result });
                console.log(result);
            })
            .then(
                fetch(`/api/policy/all`)
                    .then(res => res.json())
                    .then((result) => {
                        this.setState({ policies: result });
                        console.log(result);
                    })
            );
    }

    handleAddPolicy = policyId => {
        console.log(`button clicked`);
        const policies = this.state.policies.filter(policy => policy.id !== policyId);
        this.setState({ policies: policies});
        console.log(this.state.policies);
    }

    render(){
        return(
            <Fragment>
                {/* <ClientPicker /> */}
                <div className='buttons'>
                    {this.state.policies.map(policy => (
                        <PolicyButton key={policy.id} policy={policy.policy} onAddPolicy={this.handleAddPolicy} />
                    ))}
                </div>
            </Fragment>
        );
    }
}

export default Handbook;

And here is code for my button that should disappear after being clicked if it helps:

import React, { Component } from 'react';
import styled from 'styled-components';

class PolicyButton extends Component {
    
    state = {
        id: this.props.id, 
        policy: this.props.policy
    }

    render(){
        return(
            <button onClick={() => this.props.onAddPolicy(this.props.id)}>{this.props.policy}</button>
        )
    }
}

export default PolicyButton;

Answer 1

You missed the id prop when rendering PolicyButton

            <Fragment>
                {/* <ClientPicker /> */}
                <div className='buttons'>
                    {this.state.policies.map(policy => (
                        <PolicyButton
                          key={policy.id}
                          /* This is what you missed */
                          id={policy.id}
                          policy={policy.policy}
                          onAddPolicy={this.handleAddPolicy}
                        />
                    ))}
                </div>
            </Fragment>