Hi, I'm trying to use the for in function to find the name of an array-like property that I have inside an object and if there is an item stored inside the property. But the problem is that it is saving the item in all the arrays and what I want it to only store in the array that has the given property as its name. For example, if I have dogs and cats and an item arrives from cats, keep it inside cats only.
---- App.js
class App extends Component {
constructor() {
super();
this.state = {
lists: [],
items: {}
};
}
handleAddItem(s) {
let itemObj = s.ListName;
let items = Object.assign({}, this.state.items);
for(itemObj in items){
if(items.hasOwnProperty(itemObj)){
items[itemObj].push(s);
}
}
this.setState({ items });
}
render() {
return (
<div className="App">
<AddList addList={this.handleAddList.bind(this)} />
<div id="listsDiv" className="List">
<Lists lists={this.state.lists} items={this.state.items} addItem=
{this.handleAddItem.bind(this)} />
</div>
</div>
);
}
}
export default App;
----- Additem.js
/* global location */
/* eslint no-restricted-globals: ["off", "location"] */
import React, { Component } from 'react';
class AddItem extends Component {
constructor(props) {
super(props);
this.state = {
newItem:{}
}
}
handleSubmit(e) {
e.preventDefault(); // this prevents the page from reloading -- do not
delete this line!
let newItem = Object.assign({}, this.state.newItem);
newItem.name = this.refs.id.value;
newItem.listName = this.props.idName;
this.setState({ newItem: this.state.newItem = newItem });
this.props.addItem(this.state.newItem);
console.log(this.state.newItem);
}
render() {
var divName = 'add' + this.props.idName;
return (
<div className='addItemDiv'>
<h4>Add {this.props.idName}</h4>
<form ref='form' onSubmit={this.handleSubmit.bind(this)}>
<div id={divName} ref={divName}>
<label>Name</label><br />
<input type='text' ref='id' />
</div>
<br />
<input type='submit' value='Submit' />
<br />
</form>
</div>
);
}
}
export default AddItem;
--- Lists
class Lists extends Component {
render() {
// If there are no lists, display a relevant message
if(this.props.lists.length === 0) {
return (
<div id="listsDiv" className="List">
<h2>Add new lists to get started!</h2>
</div>
);
}
// Otherwise, for each list, create a div
var items = this.props.items;
var lists = this.props.lists;
var addItem = this.props.addItem;
console.log(items);
return (
<div key={uuidv4()}>
{
lists.map(function(listName){
return (
<List name={listName} items={items[listName]} addItem=
{addItem.bind(this)} key={uuidv4()} />
)
})
}
</div>
);
}
}
export default Lists;