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

Question

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.

Does API return single object item or its an array of objects? — Ahsan Ali
– Ahsan Ali, Commented Jan 4, 2018 at 4:54
Array of items. I want the end user to select the whole item rather than just the name attribute but only render the name attribute in the input box. — kovac
– kovac, Commented Jan 4, 2018 at 4:56

Ahsan Ali · Accepted Answer · 2018-01-04 06:23:04Z

1

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

edited Jan 4, 2018 at 6:23

answered Jan 4, 2018 at 5:03

Ahsan Ali

5,1352 gold badges19 silver badges28 bronze badges

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

2 Comments

kovac Over a year ago

This requires the some_id1 to be hard-coded... I need to pass the id as a variable

Ahsan Ali Over a year ago

You would use e.target.value to pass your ID. Please check I've updated my ans.

Daniel Abdelsamed · Accepted Answer · 2018-01-04 04:57:50Z

0

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

}}

answered Jan 4, 2018 at 4:57

Daniel Abdelsamed

4982 silver badges11 bronze badges

Comments

Loïc Bellemare-Alford · Accepted Answer · 2018-01-04 04:58:44Z

0

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>

answered Jan 4, 2018 at 4:58

Loïc Bellemare-Alford

5485 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related