Reactでドロップダウンメニューコンポーネントを作りたい

Question

Reactでアイテムの削除ボタンが出るドロップダウンメニューを作りたいのですが下記のようなコードだと

Line 17:46:  'item' is not defined  no-undef   

と出てしまいthis.props.deleteItem.bind(this, item.id)のitem.idがいけないらしいのですがどのように改善すると正常に動くのでしょうか

App.js

deleteItem(item) {
        this.props.deleteCategory.bind(this, item.id)
    }

    render() {
        return (
            <div>
                <p>ItemList</p>
                { this.props.items.map(item=> (
                    <div key={item.id}>
                        <p>{item.name}</p>
                        <Dropdown name="削除" id={item.id} click={() => this.deleteItem(item)} />
                    </div>
                ))}
            </div>
        )
    }

Dropdown.js

return (
        <div>
            <div onClick={() => setIsOpen(!isOpen)} ref={menuRef} onBlur={() => setIsOpen(false)} tabIndex={0} class="more-button">
                <Icon>more_vert</Icon>
                <div hidden={!isOpen}>
                    <button onClick={props.click}>{props.name}</button>
                </div>
            </div>
        </div>
    )

また、app.jsに直接

<button onClick={this.props.deleteItem.bind(this, item.id)}>delete</button>

と記述し、ボタンを押すと正常に削除されます。

Comments

[hoshi-takanori]

deleteItem = () => { を deleteItem = (item) => { にして、Dropdown で onClick={() => this.deleteItem(item)} などとする必要があるかと思いますが、item って category のことですか？