ReactJS Onclick not working for generated elements

Question

I am generating a list of elements with:

LeftPanel.js

if (this.state.trader_or_team == 'trader') {
            itemList = users.map(u => <User key={u.id} user={u}
                                            selected={this.props.selected_trader && this.props.selected_trader.id == u.id}
                                            onClick={this.props.handleTraderSelection.bind(this, u)}
            />);
        } else {
            itemList = teams.map(t => <Team key={t.id} team={t}
                                            selected={this.props.selected_team && this.props.selected_team.id == t.id}
                                            onClick={this.props.handleTeamSelection.bind(this, t)}
            />)
        }

handleTeamSelection/handleTraderSelection are in the parent component:

TargetManager.js

handleTraderSelection(selected_trader) {
        console.log('test')
        this.setState({
            selected_trader
        });
    }

    handleTeamSelection(selected_team) {
        this.setState({
            selected_team
        });
    }

They are passed down as props:

<LeftPanel
                                   handleTraderSelection={::this.handleTraderSelection}
                                   handleTeamSelection={::this.handleTeamSelection}
                        />

And rendered:

LeftPanel.js

return(
    <div className="item-container">
        {itemList}
    </div>
)

When I click on any of the elements nothing happen at all. What is going wrong?

It appears to break when I bind something to it, in the render method of LeftPanel.js:

render() {
    this.props.handleTraderSelection()
    ...

Works,

render() {
    this.props.handleTraderSelection.bind(this)
    ...

Does not work.

Shubham Khatri · Accepted Answer · 2016-12-20 08:21:23Z

2

Try binding the handleTraderSelection and handleTeamSelection function like

handleTraderSelection = (selected_trader) => {
        console.log('test')
        this.setState({
            selected_trader
        });
    }

    handleTeamSelection = (selected_team) => {
        this.setState({
            selected_team
        });
    }

I have been following the conventional method to call the parent function like

handleTraderSelection = (value) => {
   this.props.handleTraderSelection(value);
}
handleTeamSelection= (value) => {
   this.props.handleTeamSelection(value);
}
if (this.state.trader_or_team == 'trader') {
            itemList = users.map(u => <User key={u.id} user={u}
                                            selected={this.props.selected_trader && this.props.selected_trader.id == u.id}
                                            onClick={this.handleTraderSelection.bind(this, u)}
            />);
        } else {
            itemList = teams.map(t => <Team key={t.id} team={t}
                                            selected={this.props.selected_team && this.props.selected_team.id == t.id}
                                            onClick={this.handleTeamSelection.bind(this, t)}
            />)
        }

and it works for me well.

edited Dec 20, 2016 at 8:21

answered Dec 20, 2016 at 7:25

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

5 Comments

imperium2335 Over a year ago

I get exactly the same result as before :(

Shubham Khatri Over a year ago

Also try <LeftPanel handleTraderSelection={this.handleTraderSelection.bind(this)} handleTeamSelection={this.handleTeamSelection.bind(this)} /> . I dont think that it makes any difference though

imperium2335 Over a year ago

Nope, same result, :: is just shorthand for .bind(this)

imperium2335 Over a year ago

Your answer was useful so I +1, it's my fault for not putting onClick event on the elements.

Shubham Khatri Over a year ago

No problem, glad that you figured it out]

imperium2335 · Accepted Answer · 2016-12-20 08:16:53Z

0

I was missing my onClick for my elements...:

export default class User extends Component {

    render() {
        return (
            <div onClick={this.props.onClick}>
            ...

answered Dec 20, 2016 at 8:16

imperium2335

24.2k38 gold badges117 silver badges195 bronze badges

Collectives™ on Stack Overflow

ReactJS Onclick not working for generated elements

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related