React: Getting an object on click

Question

I have an array of objects which is passed as a property to a list that maps them to <li>.

I would like to be able, for any individual item, to click on an item from the list, and receive that object and then assign it to the root component's state - so I could then pass it on to another child comp.

var Menu = React.createClass({
render: function() {
    return (<ul>
        {
            this.props.posts.map(function(post){
                return <li><a onClick={function(e){console.log(e)}}>{post.title}</a></li>
            })
        }
    </ul>)
}

})

https://jsfiddle.net/nbenita/yxw1z42q/

Thanks!

Sounds like Flux data flow and event emit is a good way to do it. — magnudae
– magnudae, Commented May 8, 2015 at 10:29

Jonny Buchanan · Accepted Answer · 2015-05-08 11:00:40Z

2

Pass a callback function into your Menu component as a prop and use Function.prototype.bind() to partially apply the relevant post object as an argument:

Updated fiddle: https://jsfiddle.net/yxw1z42q/2/

var Blog = React.createClass({
    getInitialState: function() {
        return {
            selectedPost:this.props.posts[0]
        };
    },
    onPostSelected: function(selectedPost) {
        this.setState({
            selectedPost: selectedPost
        });
    }
    render: function() {
        return (<div>
            <Menu posts={this.props.posts} onClick={this.onPostSelected} />
            <Post content={this.state.selectedPost} />
        </div>)
    }
})

var Menu = React.createClass({
    render: function() {
        return (<ul>
            {
                this.props.posts.map(function(post){
                    return <li><a onClick={this.props.onClick.bind(this, post)}>{post.title}</a></li>
                }, this)
            }
        </ul>)
    }
})

Collectives™ on Stack Overflow

React: Getting an object on click

1 Answer 1

Further reading

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Further reading

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related