React refs on multiple elements through map

Question

I have a code to catch when the dropdown is clicked outside which is working fine :

renderTypes() {
    return _.map(this.props.items, (item, index) => {
        return (
                    <div className="ui icon top dropdown" tabIndex="0">
                        <div className={"menu transition" + classe} 
                             tabIndex="-1"
                             ref={node =>  this.node = node }/>
                    </div>
        );
    });
}

componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
}

componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
}

handleClickOutside(e){
    const domNode = ReactDOM.findDOMNode(this.node);

    if(!domNode || !domNode.contains(e.target)){
        this.setState({open: ""});
    }
}

But in fact this is working only on the last dropdown. I'm pretty sure that this is because of ref which is not well given to my div and I would like to know how to use it with a map.

Is my code correct or did I miss something?

Shubham Khatri · Accepted Answer · 2019-02-21 14:26:21Z

2

When you assign ref within map like ref={node => this.node = node } the same ref is being overridden and hence the ref will only hold the instance of last node. You should instead add a ref to the wrapper around Dropdown items

renderTypes() {
    return <div ref={node =>  this.node = node }>{_.map(this.props.items, (item, index) => {
        return (
                    <div className="ui icon top dropdown" tabIndex="0">
                        <div className={"menu transition" + classe} 
                             tabIndex="-1"
                         />
                    </div>
        );
    })}</div>;
}

answered Feb 21, 2019 at 14:26

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React refs on multiple elements through map

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related