Having trouble removing data from firebase - React, Javascript, Firebase

Question

I'm having a tough time removing data from firebase via user input. I'm able to successfully push data to firebase using this path:

const dbRef = firebase.database().ref('users/' + userName + "/" + category);

I've tried to remove it from the same path, and also by using:

removeItem(itemToRemove) {
    const userName = this.props.userName;        
    console.log(itemToRemove);
    const database = firebase.database().ref('users/' + userName + "/" + category );
    database.child(itemToRemove).remove();
}

...

<button onClick={() => props.removeItem(props.data.key)}>Remove Item</button>

Nothing I've tried has been successful; right now I'm getting this error: Uncaught TypeError: props.removeItem is not a function. My instinct is that I'm somehow missing firebase keys that I would use to handle my items in the data base, but I just can't seem to figure out how to integrate them or use them to delete.

Here's how it's organised in firebase:

Any advice?? I'd really appreciate any suggestions! Thanks!

Here's the rest of the code for the component I'm using if you want to look through it:

import React from 'react';
import ReactDOM from 'react-dom';

class AddClothing extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
            text: "",
            initialItems: []
        };

        this.handleTextChange = this.handleTextChange.bind(this);
        this.handleAddItem = this.handleAddItem.bind(this);
        this.removeItem = this.removeItem.bind(this);
        this.getStoredData = this.getStoredData.bind(this);
        this.category = "clothing";
    }
    handleTextChange(event) {
        this.setState({
            text: event.target.value
        });
    }
    handleAddItem(event) {
        event.preventDefault();
        //issue an ID number using the date
        const newItem = {
            id: Date.now(),
            text: this.state.text,
            done: false
        };

        const userName = this.props.userName;
        const category = "clothing"
        const database = firebase.database().ref('users/' + userName + "/" + category);
        database.push(newItem.text);

        this.setState((prevState) => ({
            items: prevState.items.concat(newItem),
            text: ""
        }));
    }

    removeItem(itemToRemove) {
        const userName = this.props.userName;        
        console.log(itemToRemove);
        const database = firebase.database().ref('users/' + userName + "/" + category );
        database.child(itemToRemove).remove();
    }
    getStoredData() {
        const userName = this.props.userName;
        const category = "clothing"
        const dbRef = firebase.database().ref('users/' + userName + "/" + category);
        if (this.props.userName) {
            dbRef.on("value", (firebaseData) => {
                const itemsArray = [];
                const itemsData = firebaseData.val();

                for (let itemKey in itemsData) {
                    itemsArray.push(itemsData[itemKey])
                }

                this.setState({
                    initialItems: itemsArray
                }, () => console.log(this.state.initialItems));
            });
            {
                this.state.initialItems.map((item, i) => {
                    console.log(this.state.initialItems[i]);
                })
            }
        }
    }
    render() {
        return (
            <div className="main-category">
                <div className='inner-wrapper'>

                <h3 className="item-category">Clothing</h3>
                <ul className="items">
                    {this.state.initialItems.map((item, i) => {
                            console.log(this.state.initialItems);
                            return <ClubItem data={this.state.initialItems[i]} key={this.state.initialItems[i]} remove={this.removeItem} />
                    })}
                </ul>
                <form action="">
                    <input type="text" className="form-control" onChange={this.handleTextChange} value={this.state.text} />
                    <button className="btn btn-primary" onClick={this.handleAddItem} disabled={!this.state.text}>{"Add #" + (this.state.items.length + 1)}</button>
                </form>
                </div>
            </div>
        );
    }
}

export function ClubItem(props) {
        return(
            <li className="club-item">
                <input type="checkbox" className="form-check-input"/>
                {props.data}
                <button onClick={() => props.removeItem(props.data.key)}>Remove Item</button>
            </li>
        )
    }

export default AddClothing

Answer 1

The Reference.remove() method takes no parameter to indicate what child to remove. You instead call remove() on the exact reference you want to remove. So in your case:

database.child(itemToRemove).remove();

---

For this error:

Uncaught TypeError: Cannot read property 'props' of undefined at onClick"

You can't just call props in the JSX of your render method. It needs to be this.props:

export function ClubItem(props) {
    return(
        <li className="club-item">
            <input type="checkbox" className="form-check-input"/>
            {props.data}
            <button onClick={() => this.props.removeItem(this.props.key)}>Remove Item</button>
        </li>
    )
}