Q:

How to bind an object to an input tag than just a value with ReactJS?

I'm new to ReactJS. I have an input tag that suggests possible values as the user types in the input. This suggestion list comes from an API in which each item in the list has attributes like below:
item: {
   'id': 'some_id',
   'name': 'some_name',
   'att1': 'some_att_1',
   'att2': 'some_att_2'
}

In my code, I render the 'name' attribute as the value in the input and 'id' as the key as shown below:
renderItem={(item, isHighlighted) => (
              <div
                key={item.id}
                style={{ background: isHighlighted ? "lightgray" : "white" }}>
                {item.name}
              </div>
            )}

So far so good. Then I have event handlers as shown below:
onChange={e => {
              this.setState({ from: e.target.value });
              // do something here...
}}
onSelect={val => this.setState({ from: val })}
    renderMenu={function(items, value, style) {
       return (
            <div
            style={{ ...style, ...this.menuStyle, zIndex: 10 }}
            children={items}
            />
        );
}}

As you can see, in the e.target I can access the original item's id or name attributes. However, I need to access the att1 and att2 because I need to use them as parameters when the user selects the input and clicks on a button. How can I do this? Thanks.

A:

You can use find 
onChange={e => {
    this.setState({ from: e.target.value });
    let item = obj.find(val => val.id === e.target.value); // supposing item are your array of objects
// and e.target.value is the item id
}}

    var obj = [{
        'id': 'some_id',
        'name': 'some_name',
        'att1': 'some_att_1',
        'att2': 'some_att_2'
    },{
        'id': 'some_id1',
        'name': 'some_name1',
        'att1': 'some_att_11',
        'att2': 'some_att_22'
    }
    ];

    let item = obj.find(val => val.id === 'some_id1');
    console.log("att1", item.att1);
    console.log("att2", item.att2);

