Question

I have an object Category, which has two fields: name and description.

I want to display a dropdown, where the user is shown the description of all categories. However, descriptions are not unique so I would like to get the object selected by the user instead of its description.

I want to do something like this:

handleSelect: function(event){
   // Here, I would like to get the Category selected, not the description!!!
},

render: function(){

    var categoryDesc = this.props.categories.map(function(elem){
        return <option><a href="#">{elem.description}</a></option>
    });

    return(
        <div>
            <p>Select category</p>
            <div class="dropdown">
                <select class="form-control" onChange={this.handleSelect}>
                    {categoryDesc}
                </select>
            </div>
        </div>
    )
}

Answer 1

If you use the index in map you can save that as the value for each option then use it to get the correct item from props.categories.

I think you are looking for something like this:

handleSelect: function(index){
    console.log(this.props.categories[index]); // element with name and description
},
render: function(){
    var categoryDesc = this.props.categories.map(function(elem, index){
        return (
            <option class="form-control" value={index}>
                {elem.description}
            </option>
        );
    });

    return(
        <div>
            <p>Select category</p>
            <select onChange={this.handleSelect}>
                {categoryDesc}
            </select>
        </div>
    );
}

React — display field but get object

1 个答案: