ReactJS Add same function to all children

Question

I have:

<DropdownMenu text="Sort by" isOpen={this.state.activeDropdown === "Sort_by"} onSelect={this.setSort.bind(this)}
              onClick={this.showDropdown.bind(this, "Sort_by")}
              onMouseEnter={() => this.setState({mouseInDropdown: true})}
              onMouseLeave={() => this.setState({mouseInDropdown: false})}>
    <div onMouseEnter={() => this.setState({mouseInDropdown: true})}
         onMouseLeave={() => this.setState({mouseInDropdown: false})}>
        <li>Name</li>
        <li>Age</li>
        <li>Value</li>
    </div>
</DropdownMenu>

Which as you can see contains:

<li>Name</li>
<li>Age</li>
<li>Value</li>

In DropdownMenu.js I have:

render() {
    return <div className="dropdown__menu" onClick={this.props.onClick}>
        {this.props.text} {this.state.count > 0 ? <b>{this.state.count}</b> : ''}
        <div className="dropdown__content"
             style={this.props.isOpen ? {'display': 'block'} : {'display': 'none'}}>
            {
                this.props.children
            }
        </div>
    </div>
}

this.props.children renders out those options but how do I bind this.props.onSelect to each one in a way to get the value of the selected child?

This is the answer you're probably looking for https://stackoverflow.com/questions/32370994/how-to-pass-props-to-this-props-children — George Kemp, Feb 28 '19 at 11:22

George Kemp · Accepted Answer · 2019-02-28T12:58:35.927

0

render() {
        return <div className="dropdown__menu" onClick={this.props.onClick}>
            {this.props.text} {this.state.count > 0 ? <b>{this.state.count}</b> : ''}
            <div className="dropdown__content"
                 style={this.props.isOpen ? {'display': 'block'} : {'display': 'none'}}>
                {
                       React.Children.map(this.props.children, child => React.cloneElement(child, { onSelect: this.props.onSelect})
    );
                }
            </div>
        </div>
    }

For passing through the value of the list item to the onSelect callback I suggest creating a functional component

const ListItem = ({ onSelect, value }) => (
    <li onClick={() => onSelect(value)}>{value}</li>
)

And then you'd replace your li's with <ListItem value={"name"}> etc.

edited Feb 28 '19 at 12:58

answered Feb 28 '19 at 11:26

George Kemp

541
1
7
21

Thanks, it is calling the function but how do I pass the child's values to the onSelect function? – imperium2335 Feb 28 '19 at 12:01
@imperium2335 I edited my answer to include passing through the child's value. – George Kemp Feb 28 '19 at 12:12
Do I now need to change back to this.props.children instead of React.Children...? – imperium2335 Feb 28 '19 at 12:31
No you still need to map in the onSelect event. I'm also going to post an alternate way of doing the exact same process that might be neater and easier. – George Kemp Feb 28 '19 at 12:56
Ahh I changed

imperium2335

Feb 28 '19 at 14:41

Fantastic, yeah sorry forgot to mention that I had fixed that typo. – George Kemp Feb 28 '19 at 14:48

score 0 · Answer 2 · answered Feb 28 '19 at 12:58

Another solution would be to pass the onSelect events directly to the list items.

<DropdownMenu text="Sort by" isOpen={this.state.activeDropdown === "Sort_by"} 
                                  onClick={this.showDropdown.bind(this, "Sort_by")}
                                  onMouseEnter={() => this.setState({mouseInDropdown: true})}
                                  onMouseLeave={() => this.setState({mouseInDropdown: false})}>
                        <div onMouseEnter={() => this.setState({mouseInDropdown: true})}
                             onMouseLeave={() => this.setState({mouseInDropdown: false})}>
                            <li onClick={(() => onSelect("name")}>Name</li>
                            <li onClick={(() => onSelect("age")}>Age</li>
                            <li onClick={(() => onSelect("value")}>Value</li>
                        </div>
                    </DropdownMenu>

ReactJS Add same function to all children

2 Answers2