Reputation: 5389
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
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
Reputation: 548
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
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