How to add a new item within an array property in an object?

3

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;
    
asked by user3821102 15.03.2018 в 23:04
source

1 answer

1

You must put a condition for it.

for (itemObj in items) {
    if (itemObj === nameObj) { // Si coincide 
        items[itemObj].push(nameObj); // lo añades
        console.log(itemObj + " = " + items[itemObj], items);
    }
}
    
answered by 17.03.2018 в 11:23