I have created a menu card that will show a card for each object in an array. The object holds details about that menu item. I am looking to affect one property of that menu item but I am unsure how to potentially use the key or an id to affect only that item. How can I dynamically select an object from an array based on its key or some other unique identifier?
Right now as a stand-in I use handleCategory to affect the first object in the array. I am looking instead to affect the object based on which Item card I am using.
Below is what my code looks like (basic example):
Home.js
import React, { Component } from 'react';
import { Form, Button } from 'react-bootstrap';
import Items from './items'
import Navbar from './navbar'
class Home extends Component {
constructor() {
super();
this.state = {
value: 'enter',
condimentCount: 5,
menuItems: [
{
"id": 1234,
"item_name": 'chow mein',
"category_id": 'meal'
},
{
"id": 1235,
"item_name": '',
"category_id": 'meal'
}
]
};
this.handleCategory = this.handleCategory.bind(this);
}
handleCategory = (event, id) => {
console.log('changing meal type', event.target.value)
//this.setState({value: event.target.value});
// 1. Make a shallow copy of the items
let items = [...this.state.menuItems];
// 2. Make a shallow copy of the item you want to mutate
let item = {...items[0]};
// 3. Replace the property you're intested in
item.category_id = event.target.value;
// 4. Put it back into our array. N.B. we *are* mutating the array here, but that's why we made a copy first
items[0] = item;
// 5. Set the state to our new copy
this.setState({menuItems: items});
}
render() {
let menuItems = null;
if (this.state.menuItems) {
menuItems = (
<div>
{
this.state.menuItems.map((item, i) => {
return <div key={i}>
<MenuItem
key={item.id} //IS THIS CORRECT?
item_name={item.item_name}
category_id={item.category_id}
handleCategory={this.handleCategory}
/>
</div>
})
}
</div>
)
}
return (
<div>
<Navbar />
<div>
{Items}
</div>
</div>
);
}
}
export default Home;
Items.js
import React, { Component } from 'react';
import classes from './items.module.css'
const Items = (props) => {
return (
<div className={classes.cards}>
<form>
<label>
What kind of meal item is this (e.g. meal, drink, side):
<select value={props.category_id} onChange={props.handleCategory}>
<option value="meal">meal</option>
<option value="drink">drink</option>
<option value="side">side</option>
</select>
</label>
</form
</div>
)
}
export default Items;
I'm not really sure what you're trying to do in handleCategory
, but I understand your question I believe.
You can use the index from map
to access the menu items in handleCategory
.
this.state.menuItems.map((item, i) => {
return <div key={i}>
<MenuItem
item_name={item.item_name}
category_id={item.category_id}
handleCategory={e => this.handleCategory(e, i)}
/>
</div>
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.