kovac
kovac

Reputation: 5389

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.

Upvotes: 0

Views: 51

Answers (3)

Ahsan Ali
Ahsan Ali

Reputation: 5135

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);

Upvotes: 1

Using a library like lodash you could find the value using the name or the id. Here is an example:

const items = [{
   'id': 'some_id',
   'name': 'some_name',
   'att1': 'some_att_1',
   'att2': 'some_att_2'
}]

console.log(_.find(items, { name: 'some_name'}))

/* Returns
{
  "id": "some_id",
  "name": "some_name",
  "att1": "some_att_1",
  "att2": "some_att_2"
}
*/
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

Upvotes: 0

Daniel Abdelsamed
Daniel Abdelsamed

Reputation: 498

I'm not completely sure how your components are setup so I am going to take an approach that will work regardless.

If you have access to the ID of the selected value and your data is in an array, in your onChange event you can write

onChange={e => {
    this.setState({ from: e.target.value });

    // This is where I'm unsure, is your ID e.target.value?
    const id = 0

    // I'm only using the first item in the filtered array 
    // because I am assuming your data id's are unique
    const item = items.filter(item=>item.id===id)[0]


    // Now down here you can access all of the item's data

}}

Upvotes: 0

Related Questions